根据值过滤 <SELECT> 选项答案

【问题标题】：Filter <SELECT> options based on value根据值过滤 <SELECT> 选项
【发布时间】：2020-08-05 08:13:58
【问题描述】：

我有 2 个输入选择

国家和汽车

这是结构：[https://jsfiddle.net/CornerStone20/r1eanhwv/6/][1]

JSFIDDLE： [1]：https://jsfiddle.net/CornerStone20/r1eanhwv/6/

当我选择国家时，如何只显示所选国家的汽车？

我试过了：

$(function() {
    $('#Country_Select').on('change', function() {
        var val = this.value;
        $('#Cars_Select option').hide().filter(function() {
            return this.value.indexOf( val + '_' ) === 0;
        })
        .show();
    })
    .change();
});

【问题讨论】：

标签： javascript jquery ecmascript-5

【解决方案1】：

您可以使用each 循环遍历选项，并根据show() 或hide() 选项检查car 选择框的值是否与country 选择框相同。

演示代码：

$(function() {
  $('#Country_Select').on('change', function() {
    var val = this.value;
    $('#Cars_Select option').each(function() {
      //checking value of opton in cars selct is same
      if ($(this).val() == val) {
        $(this).show(); //show it
      } else {
        $(this).hide(); //hide other
      }
    })
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
// Country select
<select id="Country_Select" class="form-control">
  <option selected="true" disabled="false">Choose Country</option>
  <option value="0001">France</option>
  <option value="8ebd9ec1-b121-44e9-a530-42f227359913">Germany</option>
  <option value="4dda2683-83c6-48c8-af9b-0a96991b7c8b">New Zealand</option>
</select>


// Cars

<select id="Cars_Select" class="form-control">
  <option selected="true" disabled="false">Choose Cars</option>
  <option value="0001">Renauld</option>
  <option value="0001">Mini</option>
  <option value="0001">Paris</option>
  <option value="8ebd9ec1-b121-44e9-a530-42f227359913">BMW</option>
  <option value="8ebd9ec1-b121-44e9-a530-42f227359913">Audi</option>
  <option value="8ebd9ec1-b121-44e9-a530-42f227359913">Mercedes</option>
  <option value="8ebd9ec1-b121-44e9-a530-42f227359913">Benz</option>
  <option value="4dda2683-83c6-48c8-af9b-0a96991b7c8b">Kiwi Auto</option>
</select>

【讨论】：

【解决方案2】：

即使问题已经得到解答，我还是在这里写一个更好的方法：

$('#Country_Select').on('change', function(e) {
  let cars = $('#Cars_Select').children();
  cars.hide();
  let country = $(this).val();
  cars.filter('[value=' + country + ']').add(cars.eq(0)).show();
});

【讨论】：