使用jquery或Ajax将数据从JSON文件填充到多个html下拉列表中

我有三个下拉列表。默认情况下，所有三个的值都是all。通过此值，第二个和第三个下拉列表将禁用所有值。当我们更改第一个下拉列表的值时，第二个列表将被启用，并填充与第一个列表上选择的类别相关的子类别。默认情况下，当我们更改second list的值时，将启用第三个list并填充second list类别的子类别。所有值都取自一个JSON文件：格式如下

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"]};

---

第一个列表是Account，第二个是Media Groups，第三个是Clip URL。

如果您试图基于指定的对象构建选择列表，请尝试此操作

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

---

这里的示例->

是否可以通过动态方式填充值？。没有硬编码