使用jquery动态填充选择选项

将有两个下拉列表，

首先是移动供应商列表，第二个是每个供应商的模型列表。

当从第一个下拉列表中选择供应商时，第二个下拉列表应该动态填充该供应商的相关模型。 这适用于移动网站，最好使用jquery-mobile

第二个选项值将在json映射中。

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

例如，如果用户在第一个下拉列表中选择nokia，则第二个下拉列表应该具有N97，N93作为选项。

Answer 1

编辑：新的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 += '' + key + ''; }); return output; }); }).change(); // bonus: how to access the download link $model.change(function() { $('#download-link').attr('href', selectValues[$vendor.val()][$model.val()]).show(); }); }); 

jsFiddle中提供了工作示例。

请注意，这应该适用于jQuery mobile。