jquery option select filter by other option select答案

【问题标题】：jquery option select filter by other option selectjquery option select filter by other option select
【发布时间】：2019-02-09 13:35:16
【问题描述】：

我想，如果我选择“哺乳动物”，动物选择选项只显示值为 1 的选项 data-animal_class。

我知道如何获取 Mammals 值，但我对如何使用过滤器感到困惑

这是我的代码：

$('#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>

【问题讨论】：

为什么是e.preventDefault();？这似乎不适用于这里
查看here的答案
谢谢，我是使用 jquery 的新手

标签： jquery html

【解决方案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>

【讨论】：

你的代码对我有用，但我需要删除 $('.select2').select2(); ，你能帮我解决这个问题吗？
使用 Select2 是与标准 select 控件的一个重要区别，您应该在问题中提到它。我建议对此提出一个新问题

【解决方案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>

【讨论】：

你的代码对我有用，但我需要删除 $('.select2').select2(); ，如何解决这个问题？
您是否尝试过刷新选择？参考stackoverflow.com/questions/17818210/…

【解决方案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>

【讨论】：