根据值筛选 <SELECT> 选项

Question

我有 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();});

Answer 1

您可以使用each循环遍历选项并检查 select-box 的值car是否与 select-box 相同，country具体取决于 thisshow()或hide()options 。

演示代码：

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

Answer 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();

});