Question

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

我想将class2的{{1}}替换为jQuery("#drop2 option).class2").show();

所以我想：var actClass

而不是：

jQuery("#drop2 option).actClass").show(); //actClass is my var.

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

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

＆＃13;

<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>

＆＃13;

show

＆＃13;

ps：如@charlietfl，提及的选项hide remove可能无法在所有浏览器中使用，因此您可以create和detach()。

您也可以使用var opt=$("option").detach();

append()

以后你可以opt.appendTo( "select" );

POST /v2/op/update

我添加了我的示例，请检查

Answer 2

使用带有下拉ID的find并应用课程。

jQuery('#drop1').bind('change keyup', function() {
  var actClass = jQuery("#drop1 option:selected").attr('class');
  var $this = jQuery("#drop2");
  $this.val($this.find('.' + actClass).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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>

Answer 3

实际上，你不需要jquery。简单的Javascript方法是动态添加/删除类，它工作正常：

document.querySelector("body").classList
document.querySelector("body").classList.add("new class")
document.querySelector("body").classList.remove("new class")

Answer 4

你可以尝试

$('#drop1').on('change', function() {
//get the class
var actClass=$('#drop1 option:selected").attr('class');
//remove the class class2 and set a new class
$('#drop2.class2").removeClass('class2').addClass(actClass);
});

根据所选类

4 个答案: