时间戳

首页 > 解决方案 > 根据所选类动态显示选项

javascript - 根据所选类动态显示选项

问题描述

我想在某些情况下获得我选择的选项类，但我无法动态获得它，我的意思是：

我想将class2of替换jQuery("#drop2 option).class2").show();为var actClass

所以我想要：jQuery("#drop2 option).actClass").show(); //actClass is my var.

代替 ：

jQuery("#drop2 option).class2").show();

//dropdown1
<select id="drop1" class="class1" name="class1">
    <option selected="true" disabled="disabled">---</option>
    <option class="class1" value="Val1">Val1</option>
    <option class="class2" value="Val2">Val2</option> //selected one
    <option class="class3" value="Val3">Val3</option>
</select>

//dropdown2
<select id="drop2" class="class1" name="class1">
    <option selected="true" disabled="disabled">---</option>
    <option class="class1" value="yop1">yop1</option>
    <option class="class2" value="yop2">yop2</option> 
    <option class="class3" value="yop3">yop3</option>
</select>

jQuery('#drop1').bind('change keyup', function() {
        var actClass = jQuery("#drop1 option:selected").attr('class'); //here i get the selected class exemple : class2
        jQuery("#drop2 option).class2").show(); //here I want to replace the .class2 by var actClass, I mean I get it dynamically
    });

标签： javascriptjquery

解决方案

您可以使用string concatenation

您可以concatenate使用字符串到变量string concatenation

Eg:  var a = "myname"

"test is"+a ==> "test is myname"


 jQuery('#drop1').bind('change keyup', function() {
        var actClass = jQuery("#drop1 option:selected").attr('class'); //here i get the selected class exemple : class2
        jQuery("#drop2 option."+actClass).hide(); //regular browsers
        jQuery("#drop2 option."+actClass).remove(); // IE, safari browsers
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
//dropdown1
<select id="drop1" class="class1" name="class1">
  <option selected="true" disabled="disabled">---</option>
  <option class="class1" value="Val1">Val1</option>
  <option class="class2" value="Val2">Val2</option> //selected one
  <option class="class3" value="Val3">Val3</option>
</select>

//dropdown2
<select id="drop2" class="class1" name="class1">
  <option selected="true" disabled="disabled">---</option>
  <option class="class1" value="yop1">yop1</option>
  <option class="class2" value="yop2">yop2</option>
  <option class="class3" value="yop3">yop3</option>
</select>

ps：作为@charlietfl，提到的选项show hide可能不适用于所有浏览器，所以你可以remove和create.

你也可以使用detach()

 var opt=$("option").detach();

以后你可以append()

opt.appendTo( "select" );

我用删除添加了我的例子，请检查

推荐阅读