php - 如何实现动态组合框选择系统

Question

最近在做一个系统，想实现一个组合框的选择过程，但是不知道怎么实现，求大佬指教？

我的场景是这样的，假设我们有两个组合框选择列表，左边一个和右边一个，左边一个是主列表，右边一个是左边列表的子列表。

当我从左边的组合框中选择一个项目时，右边的组合框的内容应该根据左边的选择而改变，

例如:让我们考虑一下手机，如果我选择品牌

诺基亚

左边组合框右边组合框的内容应该改为

C6-01
E7-00
5232
X3-02
C1-01
C7-00
5228
C5-03
5250
6120ci
E5-00
E73 

喜欢聪明。请帮助我实现这种场景!任何教程链接，示例代码以了解场景更好!

问候，兰加纳

Answer 1

诀窍是订阅更改事件并相应地重置第二个框的内容。

HTML:

<select id="brand"> 
    <option value="">- select -</option> 
    <option value="nokia">Nokia</option> 
    <option value="apple">Apple</option> 
</select> 

<select id="type"></select> 

JavaScript(准备就绪):

var selectBrand = $("#brand");
var selectType = $("#type");

var optionsList = {
    nokia: [
        "C6-01",
        "E7-00"
    ],
    apple: [
        "iPhone 3",
        "iPhone 3G",
        "iPhone 4"
    ]
};

selectBrand.change(function() {
    var brand = selectBrand.val();
    var options = optionsList[brand];
    var html;

    if (options) {
        html = '<option value="">- select -</option>';
        $.each(options, function(index, value) {
            html += '<option value="' + value + '">' + value + '</option>';
        });
    } else {
        html = '<option value="">Select a brand</option>';
    }
    selectType.html(html);
}).change();

完整示例参见 http://www.jsfiddle.net/TJJ8f/