asp.net实现省市区级联下拉列表并保存状态

asp.net实现省市联动并且保存状态，实现原理：初次使用C#传统的DataBind进行数据绑定，选择省，市后进行ajax方式加载下级列表，并将选定值保存到Hidden中，点击提交后根据Hidden的值进行省，市绑定，再将Hidden的值赋给DropDownList的SelectedValue，从而实现状态的保存。

 

HTML代码

<asp:HiddenField ID="HiddenFieldShiAreaId" runat="server" /> <asp:HiddenField ID="HiddenFieldQuAreaId" runat="server" /> <asp:HiddenField ID="HiddenAreaId" runat="server" /> <span class="searchDivP">学生省市：</span> <asp:DropDownList ID="DropDownListSheng" runat="server"> </asp:DropDownList> <asp:DropDownList ID="DropDownListShi" runat="server"> </asp:DropDownList> <asp:DropDownList ID="DropDownListQu" runat="server"> </asp:DropDownList>

 

javascript代码（此处使用jQuery）

  $(document).ready(function() { $("#DropDownListSheng").change(function() { var buxianstr = "<option selected=/"selected/" value=/"0/">不限</option>"; loadArea("DropDownListShi", this.value); }); $("#DropDownListShi").change(function() { var areaid = this.value; loadArea("DropDownListQu", this.value); $("#HiddenFieldShiAreaId").val(areaid); }); $("#DropDownListQu").change(function() { $("#HiddenFieldQuAreaId").val(this.value); }); }); function loadArea(objid, areaid) { $.ajax({ type: "POST", url: "../Friend/Friend.aspx?action=getshi", dataType: "json", data: "areaid=" + areaid, success: function(msg) { var shiHtml = ""; var selectstr = ""; shiHtml += "<option selected=/"selected/" value=/"0/">不限</option>"; for (var obj in msg) { shiHtml += "<option " + selectstr + " value='" + msg[obj].AreaID + "'>" + msg[obj].AreaName + "</option>"; } $("#" + objid).html(shiHtml); } }); } </script>

 

C#后台代码

 

protected void Page_Load(object sender, EventArgs e) { if (IsPostBack){ BindShi(); if (!string.IsNullOrEmpty(HiddenFieldShiAreaId.Value) && null != DropDownListShi.Items.FindByValue(HiddenFieldShiAreaId.Value)) DropDownListShi.SelectedValue = HiddenFieldShiAreaId.Value; BindQu(); if (!string.IsNullOrEmpty(HiddenFieldQuAreaId.Value) && null != DropDownListQu.Items.FindByValue(HiddenFieldQuAreaId.Value)) DropDownListQu.SelectedValue = HiddenFieldQuAreaId.Value; }}