dropdownlist 省市县三级联动

因为开发环境是asp.net所以采用服务器端控件实现三级联动

HTML代码：

<asp:DropDownList ID="ddls" runat="server"></asp:DropDownList>

<asp:DropDownList ID="ddlc" runat="server"></asp:DropDownList>

<asp:DropDownList ID="ddlx" runat="server"></asp:DropDownList>

<input id="h_s" type="hidden"  runat="server"/>
 <input id="h_c" type="hidden" runat="server"/>
 <input id="h_a" type="hidden" runat="server"/>

note：hidden 是为了以后在c#代码中能够取到dropdownlist选中的值

js代码：

$(document).ready(function () {
 //选择省操作
 $("#ddls").change(function () {
 var selects_v = $("#ddls").val();
 $("#h_s").val(selects_v);
 if (selects_v == "0") {
 $("#ddlc option:first").attr("selected", "selected");
 $("#ddlx option:first").attr("selected", "selected");
 $("#ddlc").attr("disabled", "disabled");
 $("#ddlx").attr("disabled", "disabled");
 }
 else {
 $("#ddlc option").remove();
 $("#ddlc").attr("disabled", "");
 $("#ddlx option:first").attr("selected", "selected");
 $("#ddlx").attr("disabled", "disabled");
 $("#ddlc").append("<option value='0'>请选择市</option>");
 $.getJSON("./ashx/select_province.ashx?s=" + selects_v + "&a" + Math.random(), function (data) {
 $.each(data.root, function (id, item) {
 $("#ddlc").append("<option value='" + item.code + "'>" + item.name + "</option>");
 });
 });
 }
 });
 //ddlx选择市
 $("#ddlc").change(function () {
 var s_c = $("#ddlc").val();
 $("#h_c").val(s_c);
 if (s_c == "0") {
 $("#ddlx")[0].selectedIndex = 0;
 $("#ddlx").attr("disabled", "disabled");
 }
 else {
 $("#ddlx option").remove();
 $("#ddlx").attr("disabled", "");
 $("#ddlx").append("<option value='0'>请选择县</option>");
 $.getJSON("./ashx/select_city.ashx?s=" + s_c + "&a" + Math.random(), function (data) {
 $.each(data.root, function (id, item) {
 $("#ddlx").append("<option value='" + item.code + "'>" + item.name + "</option>");
 });
 });
 }
 });
 //选择对应的县
 $("#ddlx").change(function () {
 var s_a = $("#ddlx").val();
 $("#h_a").val(s_a);
 });
});

c#初始化dropdownlist数据

protected void Bindddls()
 {
 SqlDataReader dr = SqlHelper.ExecuteReader(SqlHelper.ConnectionStringLocalTransaction, CommandType.StoredProcedure, "get_province");
 ddls.DataTextField = "name";
 ddls.DataValueField = "code";
 ddls.DataSource = dr;
 ddls.DataBind();
 dr.Close();
 ddls.Items.Insert(0,new ListItem("请选择省", "0"));
 }
 protected void Bindddlc()
 {
 string sValue = ddls.SelectedValue;
 if (sValue == "0")
 {
 ddlc.Items.Add(new ListItem("请选择市", "0"));
 ddlc.Enabled = false;
 }
 else
 {
 SqlDataReader dr = SqlHelper.ExecuteReader(SqlHelper.ConnectionStringLocalTransaction, CommandType.StoredProcedure, "get_city");
 ddlc.DataTextField = "name";
 ddlc.DataValueField = "code";
 ddlc.DataSource = dr;
 ddlc.DataBind();
 dr.Close();
 ddlc.Items.Insert(0,new ListItem("请选择市", "0"));
 }
 }
 protected void Bindddla()
 {
 string cValue = ddlc.SelectedValue;
 if (cValue == "0")
 {
 ddlx.Items.Add(new ListItem("请选择县", "0"));
 ddlx.Enabled = false;
 }
 else
 {
 SqlDataReader dr = SqlHelper.ExecuteReader(SqlHelper.ConnectionStringLocalTransaction, CommandType.StoredProcedure, "get_area");
 ddlx.DataTextField = "name";
 ddlx.DataValueField = "code";
 ddlx.DataSource = dr;
 ddlx.DataBind();
 dr.Close();
 ddlx.Items.Insert(0, new ListItem("请选择县", "0"));
 }
 }

ashx文件代码

select_province.ashx文件

if (HttpContext.Current.Request["s"] != null)
 {
 string sv = HttpContext.Current.Request["s"].ToString();
 SqlDataReader dr = SqlHelper.ExecuteReader(SqlHelper.ConnectionStringLocalTransaction, CommandType.StoredProcedure
 , "get_city", new SqlParameter("@sid", sv));
 string json = Object_Json.ToJson(dr);
 dr.Close();
 HttpContext.Current.Response.Write(json);
 HttpContext.Current.Response.End();
 }
 else
 {
 HttpContext.Current.Response.Write("error");
 HttpContext.Current.Response.End();
 }

select_city.ashx文件

if (HttpContext.Current.Request["s"] != null)
 {
 string sv = HttpContext.Current.Request["s"].ToString();
 System.Data.SqlClient.SqlDataReader dr = xifenfei.mssql.SqlHelper.ExecuteReader(xifenfei.mssql.SqlHelper.ConnectionStringLocalTransaction, System.Data.CommandType.StoredProcedure
 , "get_area", new System.Data.SqlClient.SqlParameter("@sid", sv));
 string json = Object_Json.ToJson(dr);
 dr.Close();
 HttpContext.Current.Response.Write(json);
 HttpContext.Current.Response.End();
 }
 else
 {
 HttpContext.Current.Response.Write("error");
 HttpContext.Current.Response.End();
 }

效果：