javascript - 填充第二个下拉菜单取决于第一个下拉菜单

Question

这里我试图创建 html 下拉列表。我的主列表中有两件事可供选择:移动 和笔记本电脑。如果我在第一个列表中选择移动选项，第二个下拉列表必须加载移动品牌的选项。如果我选择笔记本电脑，它必须加载笔记本电脑品牌。现在必须填充第三个列表取决于第二个列表选择。假设如果我选择三星作为移动品牌，它必须在下一个下拉菜单中加载 Android 版本。

我的代码(我在此处添加了第二个菜单列表，具有相同的 id。)

<select id="main_list">
    <option value="default" selected>Select Your List</option>
    <option value="mobile">mobile list</option>
    <option value="laptop">laptop list</option>
</select>
<select id="brands">
    <option value="default" selected>Select Your Mobile Brand</option>
    <option value="mobile_1">Samsung</option>
    <option value="mobile_2">Nokia</option>
</select>
<select id="brands">
    <option value="default" selected>Select Your Laptop Brand</option>
    <option value="laptop_1">HP</option>
    <option value="laptop_2">Dell</option>
</select>
<select id="samsung_select">
    <option value="default" selected>Select Your Andriod Version</option>
    <option value="andriod_1">4.1</option>
    <option value="andriod_2">4.2</option>
</select>
<select id="nokia_select">
    <option value="default" selected>Select Your Windows Version</option>
    <option value="windows_1">windows 8</option>
    <option value="windows_2">windows 8.1</option>
</select>

自动填充此列表的最佳方法是什么。这里不使用任何数据库。

JSFIDDLE

我之前看过类似的问题here ，但这对我来说不起作用

Answer 1

毫无疑问，这是一个有点乏味的编码，但这应该给你一个好的开始:

jsFiddle Demo

HTML:

<select id="main_list">
    <option value="default" selected>Select Your List</option>
    <option value="mobile">mobile list</option>
    <option value="laptop">laptop list</option>
</select>
<select id="brand" class="secondary"></select>
<select id="version" class="secondary"></select>

CSS:

.secondary {display:none;}

js/jQuery:

$(function() {
    var sel, i,
        list = ['mobile', 'laptop'],
        phone = ['Samsung', 'Nokia'],
        laptop = ['HP', 'Dell'],
        android = ['4.1', '4.2'],
        windows = ['8', '8.1'],
        dev_default = '<option value="default" selected>Select your Device brand</option>',
        os_default  = '<option value="default" selected>Select your OS version</option>';

    sel_brand = $('#brand');
    sel_version = $('#version');

    $('select').change(function() {
        switch (this.id) {
            case 'main_list':
                $('.secondary').hide();
                sel_brand.find('option').remove();
                sel_brand.append(dev_default);
                sel_brand.show();
                if (this.value == 'mobile') {
                    for (i = 0; i < phone.length; i++) {
                        $("#brand").append(
                            '<option value="' + phone[i] + '">' + phone[i] + '</option>'
                        );
                    }
                }else if (this.value == 'laptop') {
                    for (i = 0; i < phone.length; i++) {
                        $("#brand").append(
                            '<option value="' + laptop[i] + '">' + laptop[i] + '</option>'
                        );
                    }
                }
                break;
            case 'brand':
                sel_version.find('option').remove();
                sel_version.append(os_default);
                sel_version.show();
                if (this.value == 'Samsung') {
                    for (i = 0; i < android.length; i++) {
                        $("#version").append(
                            '<option value="' + android[i] + '">' + android[i] + '</option>'
                        );
                    }
                }else if (this.value == 'Nokia' || this.value == 'HP' || this.value == 'Dell') {
                    for (i = 0; i < windows.length; i++) {
                        $("#version").append(
                            '<option value="' + windows[i] + '">' + windows[i] + '</option>'
                        );
                    }
                }
                break;
        }
    });

}); //END document.ready()