jquery选项选择其他筛选选项选择

Question

我希望，如果我选择“mammals”，动物选择选项只显示值为1的选项data-animal_class。

我知道如何获得哺乳动物值，但我不知道如何使用过滤器

这是我的代码：

$('#class').on('change', function(e) {
  e.preventDefault();
  var animal = $(this).val();
  console.log(animal);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="class">
  <option value=""></option>
  <option value="1">Mammals</option>
  <option value="2">Birds</option>
  <option value="3">Reptiles</option>
</select>

<select id="animals">
  <option value=""></option>
  <option value="11" data-animal_class="1">Cow</option>
  <option value="12" data-animal_class="1">Sheep</option>
  <option value="13" data-animal_class="1">Bear</option>
  <option value="21" data-animal_class="2">Parrot</option>
  <option value="22" data-animal_class="2">Pigeons</option>
  <option value="23" data-animal_class="2">Bear</option>
  <option value="31" data-animal_class="3">Crocodile</option>
  <option value="32" data-animal_class="3">Lizard</option>
  <option value="33" data-animal_class="3">Turtle</option>
</select>

Answer 1

要使用filter()，可以提供一个函数，将给定的animal值与数据-animal_class进行比较，并在匹配时返回true。从那里,您可以隐藏/显示相关的选项,如下所示：

var $options = $('#animals option');

$('#class').on('change', function() {
  var animal = $(this).val();
  if (animal == '') {
    $options.show();
  } else {  
    $options.hide().filter(function() {
      return $(this).data('animal_class') == animal;
    }).show();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="class">
  <option value=""></option>
  <option value="1">Mammals</option>
  <option value="2">Birds</option>
  <option value="3">Reptiles</option>
</select>

<select id="animals">
  <option value=""></option>
  <option value="11" data-animal_class="1">Cow</option>
  <option value="12" data-animal_class="1">Sheep</option>
  <option value="13" data-animal_class="1">Bear</option>
  <option value="21" data-animal_class="2">Parrot</option>
  <option value="22" data-animal_class="2">Pigeons</option>
  <option value="23" data-animal_class="2">Bear</option>
  <option value="31" data-animal_class="3">Crocodile</option>
  <option value="32" data-animal_class="3">Lizard</option>
  <option value="33" data-animal_class="3">Turtle</option>
</select>