Question

我有两个下拉列表，第一个列出了像[ - All - ，Group1，Group2，Group3等]的值，第二个列表默认列出所有值。如果我们从第二组中选择第1组，则应仅列出相关的值。我们如何在Jquery＆amp; amp; html ..这里没有数据库。

Answer 1

您可以尝试something like this（使用data-）

<强> HTML：

<select id="groups">
    <option value='--All--'>--All--</option>
    <option value='Group1'>Group1</option>
    <option value='Group2'>Group2</option>
    <option value='Group3'>Group3</option>
</select>

<select id="sub_groups">
    <option data-group='all' value='0'>--Select--</option>
    <option data-group='Group1' value='one'>one</option>
    <option data-group='Group1' value='two'>two</option>
    <option data-group='Group2' value='three'>three</option>
    <option data-group='Group2' value='four'>four</option>
    <option data-group='Group3' value='five'>five</option>
    <option data-group='Group3' value='Six'>six</option>
<select>

<强> JS：

$('#groups').on('change', function(){
    var val = $(this).val();
    var sub = $('#sub_groups');
    if(val == '--All--') {
        $('#sub_groups').find('option').show();
    }
    else {
        sub.find('option').not(':first').hide();
        $('option', sub).filter(function(){
            if($(this).attr('data-group') == val){
                $(this).show();
            }
        });
    }
    sub.val(0);
});

Jquery根据第一个Dropdown显示/排序第二个下拉列表？

1 个答案: