利用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() 方式提出；
综述之，如上就实现了一直常见的、但一直没有彻底解决的二级联动无刷 、三级联动无刷等实现，呵呵~