如何在 jQuery 中使用 json 数据填充下拉列表? [英] How to populate a dropdownlist with json data in jQuery?
本文介绍了如何在 jQuery 中使用 json 数据填充下拉列表?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发一个国家级级联下拉列表...我根据 countryId 返回了 JSON 结果，但我不知道如何在新的下拉列表框中填充/填充它...
I am developing a country state cascading dropdown list... I returned JSON result based on countryId but I don't know how to populate/fill it in a new dropdown listbox...
这是我正在使用的，
function getstate(countryId) {
$.ajax({
type: "POST",
url: "Reg_Form.aspx/Getstates",
data: "{'countryId':" + (countryId) + "}",
contentType: "application/json; charset=utf-8",
global: false,
async: false,
dataType: "json",
success: function(jsonObj) {
alert(jsonObj.d);
}
});
return false;
}
警报给出了这个，
{"Table" : [{"stateid" : "2","statename" : "Tamilnadu"},
{"stateid" : "3","statename" : "Karnataka"},
{"stateid" : "4","statename" : "Andaman and Nicobar"},
{"stateid" : "5","statename" : "Andhra Pradesh"},
{"stateid" : "6","statename" : "Arunachal Pradesh"}]}
我的aspx页面有这个，
And my aspx page has this,
<td>
<asp:DropDownList ID="DLCountry" runat="server" CssClass="dropDownListSkin"
onchange="return getstate(this.value);">
</asp:DropDownList>
</td>
<td>
<asp:DropDownList ID="DLState" runat="server" CssClass="dropDownListSkin">
</asp:DropDownList>
</td>
关于如何填充 DLState 下拉菜单的任何建议...
Any suggestion on how to fill DLState dropdown...
当我通过 firebug 检查时，我收到了我的 AJAX 帖子的回复，
When I inspected through firebug I got the response for my AJAX post,
{"d":"{"Table" : [{"stateid" : "2","statename" : "Tamilnadu"},{"stateid" : "3","statename" : "Karnataka"},{"stateid" : "4","statename" : "Andaman and Nicobar"},{"stateid" : "5","statename" : "Andhra Pradesh"},{"stateid" : "6","statename" : "Arunachal Pradesh"},{"stateid" : "7","statename" : "Assam"},{"stateid" : "8","statename" : "Bihar"},{"stateid" : "9","statename" : "Dadra and N. Haveli"},{"stateid" : "10","statename" : "Daman and Diu"},{"stateid" : "11","statename" : "Delhi"},{"stateid" : "12","statename" : "Goa"},{"stateid" : "13","statename" : "Gujarat"},{"stateid" : "14","statename" : "Haryana"},{"stateid" : "15","statename" : "Himachal Pradesh"},{"stateid" : "16","statename" : "Jammu and Kashmir"},{"stateid" : "17","statename" : "Kerala"},{"stateid" : "18","statename" : "Laccadive Islands"},{"stateid" : "19","statename" : "Madhya Pradesh"},{"stateid" : "20","statename" : "Maharashtra"},{"stateid" : "21","statename" : "Manipur"},{"stateid" : "22","statename" : "Meghalaya"},{"stateid" : "23","statename" : "Mizoram"},{"stateid" : "24","statename" : "Nagaland"},{"stateid" : "25","statename" : "Orissa"},{"stateid" : "26","statename" : "Pondicherry"},{"stateid" : "27","statename" : "Punjab"},{"stateid" : "28","statename" : "Rajasthan"},{"stateid" : "29","statename" : "Sikkim"},{"stateid" : "30","statename" : "Tripura"},{"stateid" : "31","statename" : "Uttar Pradesh"},{"stateid" : "32","statename" : "West Bengal"}]}"}
推荐答案
var listItems= "";
var jsonData = jsonObj.d;
for (var i = 0; i < jsonData.Table.length; i++){
listItems+= "<option value='" + jsonData.Table[i].stateid + "'>" + jsonData.Table[i].statename + "</option>";
}
$("#<%=DLState.ClientID%>").html(listItems);
示例
<html>
<head></head>
<body>
<select id="DLState">
</select>
</body>
</html>
/*javascript*/
var jsonList = {"Table" : [{"stateid" : "2","statename" : "Tamilnadu"},
{"stateid" : "3","statename" : "Karnataka"},
{"stateid" : "4","statename" : "Andaman and Nicobar"},
{"stateid" : "5","statename" : "Andhra Pradesh"},
{"stateid" : "6","statename" : "Arunachal Pradesh"}]}
$(document).ready(function(){
var listItems= "";
for (var i = 0; i < jsonList.Table.length; i++){
listItems+= "<option value='" + jsonList.Table[i].stateid + "'>" + jsonList.Table[i].statename + "</option>";
}
$("#DLState").html(listItems);
});
这篇关于如何在 jQuery 中使用 json 数据填充下拉列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
