Populate data to multiple html Dropdown list from a JSON file using jquery or Ajax

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/