如何隐藏\显示基于JQuery的另一个选定选项的选项的特定值？

时间：2016-12-13 14:00:30

标签： javascript jquery html

我有这样的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>

在我的情况下，我需要做到这一点，如果我选择＆＃34; 1＆＃34;在第一个选择表单（＃id_num），然后下一个选择表单（#id_choices）应该只显示＆＃34; car＆＃34;和＆＃34;自行车＆＃34;选项，如果我选择＆＃34; 2＆＃34;，＃id_choices应该只显示＆＃34; house＆＃34;和＆＃34; money＆＃34;以及其他..但如果我选择＆＃34; all＆＃34;，那么#id_choices上的每个选项都应该显示出来。

如何使用jQuery解决这个问题？

4 个答案:

答案 0 :(得分：2)

你可以使用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>

希望这有帮助！

答案 1 :(得分：1)

您可以在加载页面时运行一次函数，然后每次#id_num更改时都会运行，以便删除所有可见的#id_choices选项（使用remove()），然后只删除相关选项会重新添加到#id_choices（使用append()）以替换它们。

工作示例： 

$(document).ready(function(){

  var car = '<option value="car">car</option>';
  var bike = '<option value="bike">bike</option>';
  var house = '<option value="house">house</option>';
  var money = '<option value="money">money</option>';
  var plane = '<option value="plane">plane</option>';
  var wife = '<option value="wife">wife</option>';

    function options1() {
        $('#id_choices').append(car);
        $('#id_choices').append(bike);
    }

    function options2() {
        $('#id_choices').append(house);
        $('#id_choices').append(money);
    }

    function options3() {
        $('#id_choices').append(plane);
        $('#id_choices').append(wife);
    }

    function displayOptions() {

        $('#id_choices option').remove();

        switch ($('#id_num option:selected' ).text()) {
            case('1') : options1(); break;
            case('2') : options2(); break;
            case('3') : options3(); break;
            case('all') : options1(); options2(); options3(); break;
        }
    }

    $('#id_num').change(function(){displayOptions();});

    displayOptions();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

为了完整起见，这里的方法与上面相同，但这次是在原生javascript中，所以你可以与上面的jQuery进行比较和对比：

var numbers = document.getElementById('id_num');
var choices = document.getElementById('id_choices');

function displayOptions() {

    var optionSet1 = ['car', 'bike'];
    var optionSet2 = ['house', 'money'];
    var optionSet3 = ['plane', 'wife'];
    var oldOptions = choices.getElementsByTagName('option');
    var selected = numbers.options[numbers.selectedIndex].text;

    while (oldOptions.length > 0) {
        choices.removeChild(oldOptions[0]);
    }

    switch (selected) {
        case('1') : var optionSet = optionSet1; break;
        case('2') : optionSet = optionSet2; break;
        case('3') : optionSet = optionSet3; break;
        case('all') : optionSet = optionSet1.concat(optionSet2).concat(optionSet3); break;
    }

    for (var i = 0; i < optionSet.length; i++) {
        var option = document.createElement('option');
        option.setAttribute('value',optionSet[i]);
        option.textContent = optionSet[i];
        choices.appendChild(option);
    }
}

numbers.addEventListener('change',displayOptions,false);
window.addEventListener('load',displayOptions,false);
<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>

答案 2 :(得分：0)

使用display添加值为none的属性.prop()，而不是使用disabled属性（如Saumya的答案），以防您希望它们完全不可见而不是只是禁用/灰显

答案 3 :(得分：0)

可能有更好的方法，但这确实有用..您还可以将隐藏/显示类添加到任何其他元素

＆＃13;
＆＃13; 
        $(document).ready(function () { $('#id_num').on('change', change) });

        function change() {
            $('#id_choices > option').hide();
            $($(this).find(':selected').attr('clssval')).show();
        }
＆＃13; 
.sel{display:none;}
.num1{display:block;}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
    <option value='1' clssval=".num1">1</option>
    <option value='2' clssval=".num2">2</option>
    <option value='3' clssval=".num3">3</option>
    <option value='' clssval=".num1,.num2,.num3">all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
    <option value='car' class="sel num1">car</option>
    <option value='bike' class="sel num1">bike</option>
    <option value='house' class="sel num2">house</option>
    <option value='money' class="sel num2">money</option>
    <option value='plane' class="sel num3">plane</option>
    <option value='wife' class="sel num3">wife</option>
</select>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题