jquery - 仅选择具有类名的选项

Question

默认情况下，所有选项都被选中。然后从click返回类名（zzz）的事件中，我只想显示带有 class='zzz' 的选项的其余部分

$(document).on('click', ".test" , function() {
      var selectedParent = $(this).val();
      alert(selectedParent); //returns zzz
      $('#users> option').each(function(){
         if ($(this).hasClass( "selectedParent" )){
             $(this).show();
         } else {
             $(this).hide();
      });
 });

<select multiple="true" id="users" name="users[]">
<option selected="selected" value="1" class="zzz">User 1</option>
<option selected="selected" value="2" class="zzz">User 2</option>
<option selected="selected" value="3" class="aaa">User 3</option>
<option selected="selected" value="4" class="aaa">User 4</option>
</select>

标签： jquery

Answer 1

问题是你引用了selectedParent，所以它没有使用变量值。

此外，.each()您可以将类替换为选择器，而不是使用 。

$(document).on('click', ".test", function() {
  var selectedParent = $(this).val();
  $(`#users > option.${selectedParent}`).show();
  $(`#users > option:not(.${selectedParent})`).hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple="true" id="users" name="users[]">
  <option selected="selected" value="1" class="zzz">User 1</option>
  <option selected="selected" value="2" class="zzz">User 2</option>
  <option selected="selected" value="3" class="aaa">User 3</option>
  <option selected="selected" value="4" class="aaa">User 4</option>
</select>
<br>
<button class="test" value="zzz">ZZZ</button>
<button class="test" value="aaa">AAA</button>