how to implement a dynamic combo box selection system

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/

Answer 2

This works by having two things. Firstly, a server that will return JSON for the category you need and, secondly, the code for the front end.

<?php

    // Do what you need to
    $modelsArray = getModelsForBrand($_REQUEST['brand']);
    echo json_encode($modelsArray);
?>

This uses the json_encode function to get the JSON on the array returned by whatever you use to get the models. I haven't used this function myself but it looks pretty simple.

Then your jQuery would look like this:

$("#brandCombo").change(function(){
    var chosenBrand = $(this).val(); // Get the value

    $.getJSON('/your-php-file.php', { "brand" : chosenBrand }, function(request){

        // Successful return from your PHP file

        $("#modelCombo").empty();

        // For each item returned, add it to your models combo box
        $.each(request, function(i,item){
            $("#modelCombo").append("<option value='" + item.value + "'>"+ item.name + "</option>");
        });
    });
});

In this example, brandCombo is the ID of the list with the brands and modelCombo is the ID of the list the models should appear. When the value of brandCombo is changed, it makes the request to your PHP file to get the array of models in JSON. Then it goes through each one and adds a new option to your modelCombo list.

A similar question I answered is here, where I mentioned how to do it with all the data already on the page and in listboxes (hiding/showing them) or by AJAX requests (as the example above).

The other option, as shown in dyve's answer is to have all the information you need on the page already, in the form of a JavaScript object. If you wanted to do this, then then PHP json_encode function could still be of use (although you just call it once with all your data and plop it onto the page).