会有两个下拉列表,
首先有移动供应商的列表,第二个具有每个供应商的模型列表.
当从第一个下拉列表中选择供应商时,第二个下拉列表将动态地填充该供应商的相关模型.这是用于移动网站,最好使用jquery-mobile
第二个选项的选项值将在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>
例如,如果用户在第一个下拉列表中选择nokia,则第二个下拉列表应该有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();
});
});
工作示例可用in jsFiddle.
请注意,这应该与jQuery手机一起工作.
