Question

假设我有两个下拉菜单，是否可以仅使用HTML代码过滤菜单b？如果没有，只需使用代码就可以适用于这种情况。

菜单a与A B

菜单b，A1 A2 B1 B2

Answer 1

您可以在Javascript的帮助下完成此操作。

假设您有一个下拉列表，其中一些值为“颜色，形状，名称”，其中html为：

<强> Dropdown1：

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

并且您希望根据第一个下拉选择值

过滤另一个

<强> Dropdown2：

<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

希望这会对你有所帮助:)。

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

1 个答案: