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

前言:

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

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

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

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

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

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

 

 问题展现:

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

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

 

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

 

 

 

 

你可能感兴趣的:(Ajax)