首页 > 代码库 > 三级联动
三级联动
一、三级联动思路
首先，加载第一级的数据，当第一级选项发生变化的时候，清空第二级和第三级的选项，然后根据第一级选择的项绑定第二级的值。当第二级选项发生变化的时候，清空第三级的数据，并根据第二级选项值绑定第三级的数据。
二、数据库设计
一般实现三级联动数据库的设计都是设置为3个字段。id(下一级数)、name(名字),pid（本身的级数），但是即使不这样设置表，还是可以通过其他方式实现的。
三、 三级联动几种实现
1.ASP.net控件——DropdownList && AutoPostback实现
在Form中添加三个DropdownList控件。并且为第一级和第二级注册 选项改变 的事件，注册了事件，要把AutopostBack设置为true。
城市：<asp:DropDownList ID="DropDownList1" Width="155px" Height="25px" runat="server" AutoPostBack="true" name="dpCity" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"> </asp:DropDownList>线路：<asp:DropDownList ID="DropDownList2" name="dpLine" runat="server" Width="155px" Height="25px" AutoPostBack="true" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged"> </asp:DropDownList>站点：<asp:DropDownList ID="DropDownList3" name="dpStation" Width="155px" Height="25px" AutoPostBack="true" runat="server" OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged"> </asp:DropDownList>
在后台的实现
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //绑定城市 DataTable dtCity = new HighSearch().GetCitySelect(); DropDownList1.DataSource = dtCity; DropDownList1.DataValueField = "citycode"; DropDownList1.DataTextField = "cityname"; DataBind(); DropDownList1.Items.Insert(0, new ListItem("请选择城市", "")); DropDownList2.Items.Insert(0, new ListItem("请选择线路", "")); DropDownList3.Items.Insert(0, new ListItem("请选择站点", "")); } } protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { if (DropDownList1.SelectedValue != "") { DataTable dtLine = new HighSearch().GetLineSelect(DropDownList1.SelectedValue); DropDownList2.DataSource = dtLine; DropDownList2.DataValueField = "linecode"; DropDownList2.DataTextField = "linename"; DataBind(); DropDownList2.Items.Insert(0, new ListItem("请选择线路", "")); DropDownList3.Items.Clear(); DropDownList3.Items.Insert(0, new ListItem("请选择站点", "")); } else { DropDownList2.Items.Clear(); DropDownList2.Items.Insert(0, new ListItem("请选择线路", "")); DropDownList3.Items.Clear(); DropDownList3.Items.Insert(0, new ListItem("请选择站点", "")); } } protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e) { if (DropDownList2.SelectedValue != "") { DataTable dtStation = new HighSearch().GetStationSelect(DropDownList2.SelectedValue); DropDownList3.DataSource = dtStation; DropDownList3.DataValueField = "stationcode"; DropDownList3.DataTextField = "stationname"; DataBind(); DropDownList3.Items.Insert(0, new ListItem("请选择站点", "")); } else { DropDownList3.Items.Clear(); DropDownList3.Items.Insert(0, new ListItem("请选择站点", "")); } }}
这种方法要注意的是，记得把AutopostBack属性设置为true，并且把DropdownList放在Form表单中。
2.ASP.net控件——DropdownList && ajax实现
用ajax的方式获取数据绑定。前台如下：
城市：<asp:DropDownList ID="DropDownList1" Width="155px" Height="25px" runat="server" > </asp:DropDownList>线路：<asp:DropDownList ID="DropDownList2" name="dpLine" runat="server" Width="155px" Height="25px"> </asp:DropDownList>站点：<asp:DropDownList ID="DropDownList3" name="dpStation" Width="155px" Height="25px"> </asp:DropDownList>
用Jquery，ajax获取绑定数据，ajax请求返回的是Json格式的数据。下拉框的选项改变用的是juery的change事件。
context.Response.ContentType = "application/json"; string rank = string.Empty; string code=string .Empty ; if (!string.IsNullOrEmpty(context.Request.QueryString["rank"])) { rank=context .Request .QueryString["rank"]; } if (!string.IsNullOrEmpty(context.Request.QueryString["code"])) { code =context .Request .QueryString ["code"]; } DataTable dt = new DataTable(); switch (rank ) { case "1": dt = new HighSearch().GetCitySelect();break ; case "2": dt = new HighSearch().GetLineSelect(code);break ; case "3": dt = new HighSearch().GetStationSelect(code );break ; } string json = JsonConvert.SerializeObject(dt); context.Response.Write(json);
var ddCity = $(‘#DropDownList1‘); var ddLine = $(‘#DropDownList2‘); var ddStation = $(‘#DropDownList3‘); $(‘<option value="">请选择城市</option>‘).appendTo(ddCity); $(‘<option value="">请选择线路</option>‘).appendTo(ddLine); $(‘<option value="">请选择站点</option>‘).appendTo(ddStation); $.get(‘DropDownList.ashx‘, { rank: 1 }, function (data) { $(data).each(function () { $(‘<option value="http://www.mamicode.com/‘ + this.citycode + ‘">‘ + this.cityname + ‘</option>‘).appendTo(ddCity); }); }); $(‘#DropDownList1‘).change(function () { var citycode = $(‘#DropDownList1‘).val(); $(‘#DropDownList2 option‘).remove(); $(‘#DropDownList3 option‘).remove(); $.get(‘DropDownList.ashx‘, { rank: 2, code: citycode }, function (data) { $(‘<option value="">请选择线路</option>‘).appendTo(ddLine); $(‘<option value="">请选择站点</option>‘).appendTo(ddStation); $(data).each(function () { $(‘<option value="http://www.mamicode.com/‘ + this.linecode + ‘">‘ + this.linename + ‘</option>‘).appendTo(ddLine); }); }); }); $(‘#DropDownList2‘).change(function () { var linecode = $(‘#DropDownList2‘).val(); $(‘#DropDownList3 option‘).remove(); $.get(‘DropDownList.ashx‘, { rank: 3, code: linecode }, function (data) { $(‘<option value="">请选择站点</option>‘).appendTo(ddStation); $(data).each(function () { $(‘<option value="http://www.mamicode.com/‘ + this.stationcode + ‘">‘ + this.stationname + ‘</option>‘).appendTo(ddStation); }); }); });
当时报这个错。
回发或回调参数无效
改正方法就是把asp:DropDownList 改为select ，保留 runat="server"这个属性，它还是服务器控件，还是能在后台获取值，修改后的Html和获取的方法如下：
城市： <select name="ddcity" Width="155px" Height="25px" ID="DropDownList1" runat="server"> </select> 线路： <select name="ddline" Width="155px" Height="25px" ID="DropDownList2" runat="server"> </select> 站点： <select name="ddstation" Width="155px" Height="25px" ID="DropDownList3" runat="server"> </select>
string city = Request["DropDownList1"];
string line = Request["DropDownList2"]; string station = Request["DropDownList3"];
3.html——select option && ajax实现
这种方法与上面的方法很类似，在上面实例中把runat="server"去掉，JQuery 代码还是这样写。后台就不能这么取数据了而已。
4.html——ul li 列表 && ajax 实现
因为要做响应式的页面，手机端和PC端一套代码都有好的展示，所有我就用的bootstrap的框架。我没有找到select和option这种dropdownList的UI和控件。所以就用的bootstrap的ul和li列表的方式实现的下拉。
手机端看的效果
PC端看的效果
因为bootstrap是用的ul和li进行的布局，只好尝试拼。
$.get(‘DropdownList.ashx‘, { rank: 1 }, function (data) { var ulcity = $(‘#ulCity‘); $(data).each(function () { $(‘<li value="http://www.mamicode.com/‘ + this.citycode + ‘"><a>‘ + this.cityname + ‘</a></li>‘).appendTo(ulcity); }); $(‘#ulCity li‘).each(function () { $(this).click(function () { var txt = $(this).children(‘a‘).text(); $(‘#txtCity‘).val(txt); var city = $(this).attr(‘value‘); if (city != citycode) { citycode = city; //绑定线路 $.get(‘DropdownList.ashx‘, { rank: 2, code: citycode }, function (data) { var ulLine = document.getElementById(‘ulLine‘); var ulStation = document.getElementById(‘ulStation‘); ulStation.innerHTML = ‘‘; //清空站点 ulLine.innerHTML = ‘‘; //清空线路 $(‘#txtLine‘).val(‘‘); $(‘#txtStation‘).val(‘‘); linecode = ‘‘; stationcode = ‘‘; $(data).each(function () { $(‘<li value="http://www.mamicode.com/‘ + this.linecode + ‘"><a>‘ + this.linename + ‘</a></li>‘).appendTo(ulLine); }); $(‘#ulLine li‘).each(function () { $(this).click(function () { var txt2 = $(this).children(‘a‘).text(); $(‘#txtLine‘).val(txt2); var line = $(this).attr(‘value‘); if (line != linecode) { linecode = line; ulStation.innerHTML = ‘‘; stationcode = ‘‘; $(‘#txtStation‘).val(‘‘); //绑定站点 $.get(‘DropdownList.ashx‘, { rank: 3, code: linecode }, function (data) { $(data).each(function () { $(‘<li value="http://www.mamicode.com/‘ + this.stationcode + ‘"><a>‘ + this.stationname + ‘</a></li>‘).appendTo(ulStation); }); $(‘#ulStation li‘).each(function () { $(this).click(function () { var txt3 = $(this).children(‘a‘).text(); $(‘#txtStation‘).val(txt3); stationcode = $(this).attr(‘value‘); }) }); }); } }); }); }); } }); }); });最终还是实现了三级联动的效果。
三级联动的功能很常用，但是我是第一次写。四种方法比较，我觉得最好用的是第一种。但是第一中用到了AutopostBack，如果同时又要提交表单，这种方式就比较麻烦了。第二种没有多少意义，第三种比起第二种好一点。第四种是最好不要这样用。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。