jQuery根据第一个下拉列表显示/排序第二个下拉列表?

adgfx

我有两个下拉菜单,第一个列出类似[--All-,Group1,Group2,Group3等]的值,第二个最初应列出默认的所有值。如果我们从第二个中选择组1,则应仅列出相关的那些值。我们如何在Jquery和html中实现这一点。这里没有数据库。

阿尔法

您可以尝试使用类似方法(使用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);
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

根据第一个下拉列表中的选择显示第二个下拉列表?

根据第一个多选下拉列表更新第二个多选下拉列表

AngularJS:根据第一个选择下拉列表的选择填充第二个选择下拉列表

显示基于第一个下拉列表的第二个下拉列表不起作用

jQuery的第二个下拉列表取决于第一个下拉列表没有变化

根据第一个下拉选择jQuery显示第二个下拉选项

使用ajax和jQuery根据烧瓶中第一个下拉列表中选择的值填充第二个下拉列表

如果我不更改第一个下拉列表,则第二个下拉列表的值不变

根据React.Js中第一个下拉列表的选择填充第二个下拉列表

根据 List<Map<String, Object>> 中第一个下拉列表的值填充第二个下拉列表

根据第一个下拉列表中的选定选项,使第二个下拉列表中的特定选项消失

如何使第二个下拉列表基于第一个下拉值自动选择值

如果我更改第一个下拉值,如何重置第二个下拉列表?

如何根据第一个选项选择更改第二个下拉列表和基于第二个选项选择的第三个下拉列表

如何基于第一个下拉列表选择获取动态生成的两个下拉列表的第二个下拉列表的ID?

使用jQuery根据第一个选择列表选项显示第二个字段

如何根据第一个列表的索引重新排序第二个列表?

选择第二个下拉值后重新填充角度双重下拉列表的第一个下拉列表

Javascript:如果第一个下拉列表的值大于第二个下拉列表的值,如何从第二个下拉列表中删除选项,反之亦然?

根据第一个下拉菜单禁用第二个下拉菜单选项

根据第一个下拉框的值预填充第二个下拉框

根据第一个下拉选项更改第二个下拉选项(仅JavaScript)

NodeJ:-从第一个下拉列表中获取值并动态填充第二个下拉列表中的值

不要从第一个下拉列表中已选择的项目的第二个下拉列表中选择

如何刷新与我在 mvc 中的第一个下拉列表相关的第二个下拉列表的新数据

第一个下拉选择不过滤第二个下拉

我想做一个条件,如果我从第一个下拉列表中选择这个项目,它会只显示我在第二个下拉列表中选择的项目

多个下拉列表显示基于第一个下拉列表的先前记录

如何根据上一个下拉值的选择启用/禁用第二个下拉列表值