Question

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

Nokia

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 

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

regards,
Rangana

Answer 1

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

Full example at See http://www.jsfiddle.net/TJJ8f/