利用JS+Ajax实现下拉列表无刷联动，及其相关
前言：
要实现下拉列表的无刷联动，之前一直认为主要涉及到JS中的Ajax问题，然而其中仍然有很多问题，在具体操作实现过程时才逐步将其解决。呵呵~
如上图示，我们实现了部门—岗位的联动。
具体情境如下：数据库中有表Dept：部门表、User：员工表、Leadership：部门-岗位表。其中我们假设Leadership的记录如下：
为简便，没有采取在后台读取数据库，而是模拟情况，实现图示的无刷联动效果。
问题展现：
在实现过程中主要问题有三点：
1.如何用Ajax将数据库中数据，以何种方式返回（用ResponseText属性）；
2.如何将返回数据解析，读入对应DropDownList中，实现Text和Value的填充；
3.如何读取联动的下拉列表框的值（这点完全不了解情况，在之前）；
初步答案是：用字符串的方式传输，并解析为字符串数组，再在后台以Response.Form["DropDownList2"]读取对应下拉列表框的值。
先看后台代码：
<title>无标题页</title>
<script type="text/javascript">
//Description: 通过代码，演示无刷联动下拉列表框的实现方式
//CopyRight: http://www.cnblogs.com/yangmingming
//Notes: 为简便，采用最简便的示例
//声明XmlHttpRequest变量
var xmlHttp;
// 声明用户名是否存在的变量
var existUser = 0;
function getHeadship(deptCode)
{
//二级连动
var xmlHttpDwl = GetHttpObject();
if (xmlHttpDwl == null) {
alert("您的浏览器已过时");
return;
}
xmlHttpDwl.onreadystatechange = function() {
if (xmlHttpDwl.readyState == 4) {
var arr = new Array(100);
arr = xmlHttpDwl.responseText.split("|");
alert (arr[4]);
document.getElementById("DropDownList2").length = 0;
var count=0;
for (var i = 0, j = 0; i < arr.length - 1; i = i + 2, j++) {
var opt=document .createElement ("Option");
opt.text=arr[i];
opt.value=arr[i+1];
document.getElementById("DropDownList2").options.add(opt);
// document.getElementById("DropDownList2").options[j].selected=true ;
}
}
}
xmlHttpDwl.open("GET", "GetDropDownList.aspx?deptCode=" + deptCode , true);
xmlHttpDwl.send(null);
}
//获得XmlHttpRequest对象xmlHttp
function GetHttpObject()
{
var xmlHttp = null;
try {
//FireFox,Opera等浏览器
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
try {
xmlHttp = new ActiveXObject("Msxml12.XMLHTTP");
}
catch (e)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>
</head>
<body>
<form id="form1" runat="server" >
<div>
部门：<asp:DropDownList ID="DropDownList1" runat="server" onchange="getHeadship(this.value)">
<asp:ListItem>总经办</asp:ListItem>
<asp:ListItem>项目部</asp:ListItem>
<asp:ListItem>财务部</asp:ListItem>
<asp:ListItem Selected="True" Value="0">请选择部门</asp:ListItem>
</asp:DropDownList>岗位：
<asp:DropDownList ID="DropDownList2" runat="server" >
</asp:DropDownList><br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="提交" />
<br />
</div>
</form>
</body>
</html>
其对应的图示即为图1所示。同时作为Ajax辅助，我们单独提供一个提供返回值的GetDropDownList.aspx页面，其后台代码如下：
代码//CopyRight: http://www.cnblogs.com/yangmingming
//Notes: 为简便，采用最简便的示例，演示读取数据库情形
public partial class GetDropDownList : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// if (Request["deptCode"].ToString().Trim () != "0")
{
string strWhere = Request["deptCode"].ToString();
string strDropList = string.Empty;
if (strWhere != "0")
{
if (strWhere == "总经办")
strDropList = "总经理|1|总经理助理|2|";
else if (strWhere == "项目部")
strDropList = "项目部长|3|开发组长|4|程序员|5|";
else if (strWhere == "财务部")
strDropList = "财务部长|6|会计|7|";
}
Response.Write(strDropList);
}
}
}
在默认页面的后台代码为：
代码//CopyRight: http://www.cnblogs.com/yangmingming
//Notes: 为简便，只模拟一按钮提交情形
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
//入库操作
string dropDownList1 = DropDownList1.SelectedValue.ToString();
string dropDownList2 = Request.Form["DropDownList2"].ToString();
int i = 0;
}
}
即通过以上准备，即实现了下拉列表的无刷联动，又在按钮事件的函数中，对其值进行了读取。
涉及点分析：
1.在其中Ajax中，其实现方式固定，在此仅使用并回顾一下；
2.对于级联的下拉列表框，其填充方式，应该有2种方式，一种如上示，另一种new Option（Text，value），我一直没有实现value的填充，不知为何？然而这种方式很容易的实现了，呵呵~；
3.当单步调试，发现已经实现了级联下拉列表框的填充（包括text，和value），然而却在后台取不出。？经过CSDN相关解释，认为： 在js实现的option填充，即使是服务器控件，依然无法取出其值，只有采用：Request.Form["DropDownList2"].ToString() 方式提出；
综述之，如上就实现了一直常见的、但一直没有彻底解决的二级联动无刷 、三级联动无刷等实现，呵呵~
