Question

I have three dropdown list. By default the values of all three are “All”. By this value the second and thrid dropdown list will be disabled with “ALL” value. when we change the value of first dropdown list, the second list will be enabled and populte the sub categories related to the category selected on the first list. when we change the value of second list (by default it is “All”), thethird list is enabled and populate the sub categories of the category of second list. all the values are taken from a JSON file: it’s in the format

var accounts = ["WHDH","TF"];


var mediaGroups = {"WHDH": ["WHDH_1","WHDH_2"], "TF": ["TF_1","TF_2"]};


var clipUrls = {"WHDH_1": ["/live/whdh1/1","/live/whdh1/2","/live/whdh1/3"], "WHDH_2": ["/live/whdh2/1","/live/whdh2/2","/live/whdh2/3"], "TF_1": ["/live/tf1/1","/live/tf1/2","/live/tf1/3"], "TF_2": ["/live/tf2/1","/live/tf2/2","/live/tf2/3"]};

The first list is Account, second is Media Groups, Thrid is Clip URLS.

Answer 1

If you trying to build the select lists based on the objects you specified – try this

Example HTML :

<select id="first">
    <option value="all">All</option>
    <option value="WHDH">WHDH</option>
    <option value="TF">TF</option>
</select>

<select id="second">
    <option value="all">All</option>
</select>

<select id="third">
    <option value="all">All</option>
</select>

JavaScript :

var accounts = ["WHDH","TF"];
var mediaGroups = {"WHDH": ["WHDH_1","WHDH_2"], "TF": ["TF_1","TF_2"]};
var clipUrls = {"WHDH_1": ["/live/whdh1/1","/live/whdh1/2","/live/whdh1/3"], "WHDH_2": ["/live/whdh2/1","/live/whdh2/2","/live/whdh2/3"], "TF_1": ["/live/tf1/1","/live/tf1/2","/live/tf1/3"], "TF_2": ["/live/tf2/1","/live/tf2/2","/live/tf2/3"]};

$('#first').change(function() {
    // Remove all options and add the default All option
    $('#second').find('option')
    .remove()
    .end()
    .append('<option value="All">All</option>')
    .val('All');

    // loop mediaGroups and add options
    $.each(mediaGroups[$(this).val()], function(key, value) {   
     $('#second')
         .append($("<option></option>")
         .attr("value",value)
         .text(value)); 
    });
});

$('#second').change(function() {
    // Remove all options and add the default All option
    $('#third').find('option')
    .remove()
    .end()
    .append('<option value="All">All</option>')
    .val('All');

    // loop clipUrls and add the values based on other select list
    $.each(clipUrls[$(this).val()], function(key, value) {   
     $('#third')
         .append($("<option></option>")
         .attr("value",value)
         .text(value)); 
    });
});

Example here -> http://jsfiddle.net/Ac2na/