联系:手机/微信(+86 17813235971) QQ(107644445)
作者:惜分飞©版权所有[未经本人同意,不得以任何形式转载,否则有进一步追究法律责任的权利.]
因为开发环境是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();
}
