筛选<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循环遍历选项并根据此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>

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