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

小编典典

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

ajax

这些天，我正在实施一个系统，我想实施一个组合框选择过程，但我不知道如何实施，所以请你们帮忙吗？

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

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

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

Nokia

从左侧组合框，右侧组合框的内容应更改为

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

像明智的。请帮助我实现这种情况！任何教程链接，了解场景的示例代码都更好！

问候，Rangana

阅读 293

2020-07-26

共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/

2020-07-26