html中的多个下拉菜单过滤器答案

【问题标题】：Multiple dropdown menu filter in htmlhtml中的多个下拉菜单过滤器
【发布时间】：2021-09-19 03:05:05
【问题描述】：

假设我有两个下拉菜单，是否可以仅使用 HTML 代码过滤菜单 b？如果不是，那么简单的代码可以应用哪种方法。

菜单 a 和 A B

带有 A1 A2 B1 B2 的菜单 b

【问题讨论】：

标签： html drop-down-menu filter

【解决方案1】：

您可以在 Javascript 的帮助下做到这一点。

假设您有一个下拉菜单，其中包含“颜色、形状、名称”等值，其中 html 为：

下拉菜单1：

<select id="ddl">
<option value=""></option>
<option value="Colours">Colours</option>
<option value="Shapes">Shapes</option>
<option value="Names">Names</option>
</select>

并且您想根据第一个下拉选择的值过滤另一个

下拉菜单2：

<select id="ddl2">
</select>

然后应用下面的 Javascript 代码：

过滤掉：

function configureDropDownLists(ddl1,ddl2) {
        var colours = new Array('Black', 'White', 'Blue');
        var shapes = new Array('Square', 'Circle', 'Triangle');
        var names = new Array('John', 'David', 'Sarah');

        switch (ddl1.value) {
            case 'Colours':
                ddl2.options.length = 0;
                for (i = 0; i < colours.length; i++) {
                    createOption(ddl2, colours[i], colours[i]);
                }
                break;
            case 'Shapes':
                ddl2.options.length = 0; 
            for (i = 0; i < shapes.length; i++) {
                createOption(ddl2, shapes[i], shapes[i]);
                }
                break;
            case 'Names':
                ddl2.options.length = 0;
                for (i = 0; i < names.length; i++) {
                    createOption(ddl2, names[i], names[i]);
                }
                break;
            default:
                ddl2.options.length = 0;                
        }

    }

并为第二个下拉菜单创建选项运行时：

function createOption(selBox, text, value) {
        var opt = document.createElement('option');
        opt.value = value;
        opt.text = text;
        selBox.options.add(opt);
    }

申请：

onchange="configureDropDownLists(this,document.getElementById('ddl2'))" 在第一个下拉列表中，如：

<select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
<option value=""></option>
<option value="Colours">Colours</option>
<option value="Shapes">Shapes</option>
<option value="Names">Names</option>
</select>

所以下拉菜单 2 会根据第一个选择的值进行过滤。

请参考fiddle for live demo

希望对你有帮助:)

【讨论】：

@Hei Noah，你的解释好吗？
您的代码在台式计算机上非常出色，但在移动设备上却不行。你有什么建议吗？