[英]Populating select option dynamically with jquery
將有兩個下拉列表,
首先是移動供應商的列表,第二是每個供應商的型號列表。
當從第一個下拉列表中選擇一個供應商時,第二個下拉列表應動態填充該供應商的相關模型。 這是針對移動網站的,最好使用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>
例如,如果用戶在第一個下拉列表中選擇“諾基亞”,則第二個下拉列表應具有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一起使用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.