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

假设我有两个下拉菜单，是否可以只使用HTML代码过滤菜单b？ 如果不是，哪种方法可以应用于这种情况，只需编写代码即可

菜单a加B

---

菜单b带有A1 A2 B1 B2

您可以在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>

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

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（这个，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根据第一个选择的值获取过滤器

请参阅

---

希望这能对你有所帮助：）

@Hei Noah，你对解释没意见吧？你的代码在台式电脑上很好，但在移动设备上不起作用。你有什么建议吗？