填充第二个下拉菜单取决于第一个下拉列表选择 [英] populate a second drop down menu depends upon first drop down selection

问题描述

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

Here I am trying to create html drop down list. I have two things to select on my main list mobile and laptop. If I select the mobile option in my first list, the second drop down list has to load the options from mobile brand. and if I select laptop, it has to load laptop brand.Now the third list has to populate depends on the second list selection. suppose if I select samsung as mobile brand, it has to load the android version on next drop down menu.

我的代码（我已经将第二个菜单列表另存为这里具有相同的身份。）

My code(I have added the second menu list as separate here with same 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>

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

what is the best way to populate this list automatically. Not using any db here.

JSFIDDLE

我看到过一个类似的问题这里，但这不是在这里为我工作

I have seen a previous similar question here, but this is not working here for me

推荐答案

这是一个乏味的编码，但这应该给你一个很好的开始：

There's no getting around that it's a bit of tedious coding, but this should give you a good start:

jsFiddle Demo

HTML： >

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()

这篇关于填充第二个下拉菜单取决于第一个下拉列表选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！