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

Question

我想在某种条件下获取我选择的选项类，但我无法动态获取它，我的意思是:

我想用 var actClass 替换 jQuery("#drop2 option).class2").show(); 的 class2

所以我想要: jQuery("#drop2 option).actClass").show();//actClass 是我的变量。

而不是:

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
    });

Answer 1

您可以使用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" );

我添加了示例并删除，请检查