Javascript 使用jquery动态填充选择选项

将有两个下拉列表

第一个是移动供应商列表，第二个是每个供应商的型号列表

从第一个下拉列表中选择供应商时，第二个下拉列表应动态填充该供应商的相关模型。这是手机网站，最好用

第二个选项的选项值将显示在json映射中

  <select class="mobile-vendor">
    <option value="motorola">Motorola</option>
    <option value="nokia">Nokia</option>
    <option value="android">Android</option>
  </select>

 selectValues = {"nokia"   : {"N97":"download-link", 
                              "N93":"download-link"}, 
                 "motorola": {"M1":"download-link",
                              "M2":"download-link"}}

<select class="model">
    <option></option>
</select>

例如，如果用户在第一个下拉列表中选择诺基亚，则第二个下拉列表中的选项应为N97、N93。

编辑：新javascript以考虑更新的json结构：

$(function() {
    var selectValues = {
        "nokia": {
            "N97": "http://www.google.com",
            "N93": "http://www.stackoverflow.com"
        },
        "motorola": {
            "M1": "http://www.ebay.com",
            "M2": "http://www.twitter.com"
        }
    };

    var $vendor = $('select.mobile-vendor');
    var $model = $('select.model');
    $vendor.change(function() {
        $model.empty().append(function() {
            var output = '';
            $.each(selectValues[$vendor.val()], function(key, value) {
                output += '<option>' + key + '</option>';
            });
            return output;
        });
    }).change();

    // bonus: how to access the download link
    $model.change(function() {
        $('#download-link').attr('href', selectValues[$vendor.val()][$model.val()]).show();
    });
});

工作示例可用

---

请注意，这在jQuery mobile上应该可以正常工作。

您的json数组有问题，它不能按您希望的方式工作。每个项目只能有一个同名实例，请看这里：我已经更新了json映射，您能检查并更新您的答案吗？谢谢你的回答@Kugathassanabimaran在嵌套对象中为每个属性设置下载链接值有什么意义？一旦用户从第二个下拉列表中选择该项，他将能够下载对应于供应商模型的应用程序。@Kugathassanabimaran用完整的代码更新，并更新了JSFIDLE。应该做你需要做的事情。这个方法与http://code.jquery.com/jquery-latest.js，但是，不能与http://code.jquery.com/mobile/latest/jquery.mobile.min.js