利用JS+Ajax实现下拉列表无刷联动，及其相关

前言：

     要实现下拉列表的无刷联动，之前一直认为主要涉及到JS中的Ajax问题，然而其中仍然有很多问题，在具体操作实现过程时才逐步将其解决。呵呵~

    

   如上图示，我们实现了部门—岗位的联动。

    具体情境如下：数据库中有表Dept：部门表、User：员工表、Leadership：部门-岗位表。其中我们假设Leadership的记录如下：

 

 为简便，没有采取在后台读取数据库，而是模拟情况，实现图示的无刷联动效果。

 

 问题展现：

    在实现过程中主要问题有三点：

1.如何用Ajax将数据库中数据，以何种方式返回（用ResponseText属性）；

2.如何将返回数据解析，读入对应DropDownList中，实现Text和Value的填充；

3.如何读取联动的下拉列表框的值（这点完全不了解情况，在之前）；

  初步答案是：用字符串的方式传输，并解析为字符串数组，再在后台以Response.Form["DropDownList2"]读取对应下拉列表框的值。

先看后台代码：

< head  id ="Head1"  runat ="server" >
     < 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页面，其后台代码如下：

代码

// Description: 通过代码，模拟读取数据库获取值的情形

// 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);
            }
        }
    }

  在默认页面的后台代码为：

 

代码

// Description: 通过代码，展现获取对应下拉列表框值的方式

// 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()  方式提出；

 

  综述之，如上就实现了一直常见的、但一直没有彻底解决的二级联动无刷 、三级联动无刷等实现，呵呵~