jquery 三级联动
function refreshAreaInfo() {
var provinceId = $("#DropDownListProvince").val();
$.ajax({
type: "get",
contentType: "application/json;utf-8",
url: "AjaxForm.aspx?id=" + provinceId, //这里是要传递的参数，格式为data:"{paraName:paraValue}"
dataType: "json",
success: function(result) {
$("#DropDownListOther").hide();
$("#DropDownListCity").children().remove();
var str = "<option value='-1'>请选择</option>";
$("#DropDownListCity").append(str);
for (var i = 0; i < result.length; i++) {
var option = "<option value='" + result[i].Id + "'>" + result[i].AreaName + "</option>";
$("#DropDownListCity").append(option);
}
},
error: function(msg) {
alert(msg);
}
});
}
function GetCityArea() {
var id = $("#DropDownListCity").val();
$.ajax({
type: "post",
contentType: "application/json;utf-8",
url: "AjaxForm.aspx/RefreshAreaInfo", //这里是要传递的参数，格式为data:"{paraName:paraValue}"
data: "{id:" + id + "}",
dataType: "json",
success: function(result) {
$("#DropDownListOther").show();
$("#DropDownListOther").children().remove();
var str = "<option value='-1'>请选择</option>";
$("#DropDownListOther").append(str);
result = $.parseJSON(result.d);
for (var i = 0; i < result.length; i++) {
var option = "<option value='" + result[i].Id + "'>" + result[i].AreaName + "</option>";
$("#DropDownListOther").append(option);
}
},
error: function(msg) {
alert(msg);
}
});
}
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownListProvince" runat="server" onchange="refreshAreaInfo()">
</asp:DropDownList>
<asp:DropDownList ID="DropDownListCity" runat="server" onchange="GetCityArea()" Width="120">
</asp:DropDownList>
<asp:DropDownList ID="DropDownListOther" runat="server">
</asp:DropDownList>
</div>
</form>
</body>
Ajax后台：
protected void Page_Load(object sender, EventArgs e)
{
string provinceId = Request["id"].ToString();
string data = GetAreaInfo(int.Parse(provinceId));
Response.Write(data);
Response.End();
}
private static string GetAreaInfo(int id)
{
AreaInfoDataClassesDataContext dataContext = new AreaInfoDataClassesDataContext();
var result = from c in dataContext.AreaInfo
where c.parentId == id
select new { c.id, c.areaName };
JavaScriptSerializer Serializer = new JavaScriptSerializer();
string data = Serializer.Serialize(result);
return data;
}
[WebMethod]
private static string refreshAreaInfo(int id)
{
string data = GetAreaInfo(id);
return data;
}
