Question

我想要，如果我选择“哺乳动物”，则动物选择选项仅显示值为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值与data-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>

Answer 2

您可以尝试使用以下逻辑，其中可以在类选择框的更改事件上显示/隐藏动物选项。您可以使用属性选择器显示/隐藏选项

$(function(){
  $('#class').on("change", function(){
    $("#animals option").hide();
    var value = $(this).val();
    if(value) {
       $("#animals option[data-animal_class=" + value + "]").show();
    }
      $("#animals").val(""); 
  });
});

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

这是我的版本

$('#animalClass').on('change', function(e) {
  var animal = $(this).val();
  $("#animals option").each(function() { 
     var show = $(this).attr("value").indexOf(animal)==0;
//  $(this).prop("disabled",!show); // disable OR
    $(this).toggle(show); // toggle
  })
}).change(); // run at load

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

jQuery选项选择通过其他选项选择过滤

3 个答案: