如何实现一个动态的组合框选择系统 [英] how to implement a dynamic combo box selection system

问题描述

我实现一个系统中的这些日子里，我想实现一个组合框中选择的过程，但我不知道如何实现它，所以要求你们帮个忙吗？

I'm implementing a system these days, i want to implement a combo box selection process but i don't know how to implement it, so asking you guys favor?

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

my scenario is this, let's say we have two combo box selection lists, left one and right one, left one is the main one and the right one is the child of the left one.

当我选择从左侧组合框右边组合框的内容应改为一个项目按左边的一个选择，

when i select a item from the left combo box the right combo box's content should be changed according to the selection of the left one,

例如：让我们想想手机，如果我选择品牌

Ex: let's think about mobile phones, if i select the brand

诺基亚

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

from the left combo box right combo box's content should be changed to

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

像明智的。请大家帮我实现一个这样的情景！ 任何教程链接，样品codeS了解的情况是好！

like wise. please help me to implement a this kind of scenario! any tutorial links, sample codes to understand the scenario is better!

问候， Rangana

regards, Rangana

推荐答案

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

The trick is do subscribe to the change event and reset the contents of the second box accordingly.

HTML：

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

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

的JavaScript（在准备）：

JavaScript (on ready):

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/

这篇关于如何实现一个动态的组合框选择系统的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！