javascript - 如何根据 JQuery 选择的另一个选项隐藏\显示选项的特定值？

Question

我有这样的 html 选择表单:

<label>Num:</label>
<select id="id_num">
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
    <option value='car'>car</option>
    <option value='bike'>bike</option>
    <option value='house'>house</option>
    <option value='money'>money</option>
    <option value='plane'>plane</option>
    <option value='wife'>wife</option>
</select>

在我的例子中，如果我在第一个选择表单 (#id_num) 中选择“1”，那么下一个选择表单 (#id_choices) 应该只显示“car”和“bike”选项，如果我选择“2”，#id_choices 应该只显示“house”和“money”，以及其余的。但是如果我选择“all”，那么应该显示#id_choices 上的每个选项。

如何使用 jQuery 解决该情况？

Answer 1

您可以使用 jQuery 的 $.inArray()过滤您的选项，并使它们 display: none; 取决于项目在数组中的出现，

请看下面的代码:

$(function() {


    $('#id_num').on('change', function(e) {

        if ($(this).val() == 1) {

            var arr = ['car', 'bike'];
            $('#id_choices option').each(function(i) {
                if ($.inArray($(this).attr('value'), arr) == -1) {
                    $(this).css('display', 'none');
                } else {
                    $(this).css('display', 'inline-block');
                }
            });
        } else if ($(this).val() == 2) {

            var arr = ['house', 'money'];
            $('#id_choices option').each(function(i) {
                if ($.inArray($(this).attr('value'), arr) == -1) {
                    $(this).css('display', 'none');
                } else {
                    $(this).css('display', 'inline-block');
                }
            });
        } else if ($(this).val() == 3) {

            var arr = ['plane', 'wife'];
            $('#id_choices option').each(function(i) {
                if ($.inArray($(this).attr('value'), arr) == -1) {
                    $(this).css('display', 'none');
                } else {
                    $(this).css('display', 'inline-block');
                }
            });
        } else {

            $('#id_choices option').each(function(i) {
                $(this).css('display', 'inline-block');
            });

        }

    })


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
    <option disabled selected>Select</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
    <option value='car'>car</option>
    <option value='bike'>bike</option>
    <option value='house' >house</option>
    <option value='money' >money</option>
    <option value='plane' >plane</option>
    <option value='wife' >wife</option>
</select>

希望这对您有所帮助!