标签：style blog http color os strong
一、三级联动思路
首先，加载第一级的数据，当第一级选项发生变化的时候，清空第二级和第三级的选项，然后根据第一级选择的项绑定第二级的值。当第二级选项发生变化的时候，清空第三级的数据，并根据第二级选项值绑定第三级的数据。
二、数据库设计
一般实现三级联动数据库的设计都是设置为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="‘ + 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="‘ + 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="‘ + 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="‘ + 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="‘ + 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="‘ + 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，如果同时又要提交表单，这种方式就比较麻烦了。第二种没有多少意义，第三种比起第二种好一点。第四种是最好不要这样用。
标签：style blog http color os strong
原文地址：http://www.cnblogs.com/wangliu/p/3847992.html
