dropdownlist 省市县三级联动

联系:手机/微信(+86 17813235971) QQ(107644445)QQ咨询惜分飞

标题: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();
 }

效果:

此条目发表在 Asp.Net, JavaScript 分类目录。将固定链接加入收藏夹。

评论功能已关闭。