asp.net实现DropDownList、ListBox无刷新三级联动(javascript)

此为DropDownList无刷新三级联动的另一种方法，使用javascript操作，因是在客户端操作，所以切换速度较快，但如果数据量大时，加载时会稍慢点，下一篇文章我会发布针对此方法的改进方案，供大家参考。此为DropDownList示例，ListBox只需略加修改。

数据库为国家统计局最新的行政区划，自己又加入了香港、台湾、澳门的行政区划，需要的朋友可直接下载使用。
数据库下载
/Files/netshuai/area.rar

aspx页面代码

   
<% =strAreaData %>
  < script language  =   " JavaScript "  type = " text/javascript " >

    function changearea1()
    {
    document.all( " <% =Ddl_AreaTwo.ClientID %> " ).length  =   0 ; 
    document.all( " <% =Ddl_AreaTwo.ClientID %> " ).options[ 0 ]  =   new  Option( ' 选择城市 ' , ' 0 ' );
    document.all( " <% =Ddl_AreaThree.ClientID %> " ).length  =   0 ; 
    document.all( " <% =Ddl_AreaThree.ClientID %> " ).options[ 0 ]  =   new  Option( ' 选择城市 ' , ' 0 ' );
    var oneid = document.all( " <% =Ddl_AreaOne.ClientID %> " ).value;
    var i;
     for  (i = 0 ;i  <  onecount; i ++ )
        {
             if  (subcat[i][ 1 ]  ==  oneid)
            { 
                document.all( " <% =Ddl_AreaTwo.ClientID %> " ).options[document.all( " <% =Ddl_AreaTwo.ClientID %> " ).length]  =   new  Option(subcat[i][ 0 ], subcat[i][ 2 ]);
            }        
        }
        
    }
    
        function changearea2()
    {
    document.all( " <% =Ddl_AreaThree.ClientID %> " ).length  =   0 ; 
    document.all( " <% =Ddl_AreaThree.ClientID %> " ).options[ 0 ]  =   new  Option( ' 选择城市 ' , ' 0 ' );
    var twoid = document.all( " <% =Ddl_AreaTwo.ClientID %> " ).value;
    var oneid = document.all( " <% =Ddl_AreaOne.ClientID %> " ).value;
    var i;
     for  (i = 0 ;i  <  onecount1; i ++ )
        {
             if  (subcat1[i][ 2 ]  ==  twoid)
            { 
                 if  (subcat1[i][ 1 ]  ==  oneid)
                {
                    document.all( " <% =Ddl_AreaThree.ClientID %> " ).options[document.all( " <% =Ddl_AreaThree.ClientID %> " ).length]  =   new  Option(subcat1[i][ 0 ], subcat1[i][ 3 ]);
                }        
            }
        }
    }      
    
     </ script >                 
                     < asp:DropDownList ID = " Ddl_AreaOne "  runat = " server "   AppendDataBoundItems = " True " >
                         < asp:ListItem Value = " 0 " > 请选择 </ asp:ListItem >
                     </ asp:DropDownList >
                     < asp:DropDownList ID = " Ddl_AreaTwo "  runat = " server "   >
                         < asp:ListItem Value = " 0 " > 请选择 </ asp:ListItem >
                     </ asp:DropDownList >
                     < asp:DropDownList ID = " Ddl_AreaThree "  runat = " server "   >
                         < asp:ListItem Value = " 0 " > 请选择 </ asp:ListItem >
                     </ asp:DropDownList >

cs页面代码

protected   string  strAreaData;
     protected   void  Page_Load( object  sender, EventArgs e)
    {
        Ddl_AreaOne.Attributes.Add( " onchange " ,  " changearea1() " );
        Ddl_AreaTwo.Attributes.Add( " onchange " ,  " changearea2() " );
         string  strSQL;
        strSQL  =   " select * from nts_area where oneid<>0 and twoid=0 and threeid=0 order by sort " ;
        Ddl_AreaOne.DataSource  =  DataClass.GetDataReader(strSQL);
        Ddl_AreaOne.DataTextField  =   " areaname " ;
        Ddl_AreaOne.DataValueField  =   " oneid " ;
        Ddl_AreaOne.DataBind();
        strAreaData  =   " <script language = 'JavaScript' type='text/javascript'>var onecount;onecount=0;subcat = new Array(); " ;
        strSQL  =   " select * from nts_area where oneid<>0 and twoid<>0 and threeid=0 order by sort " ;
        string ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source='数据库路径'";
        OleDbConnection cnn = new OleDbConnection(ConnectionString);
        cnn.Open();
        OleDbCommand cmd=new OleDbCommand(sql, cnn);
        OleDbDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
         int  i1  =   0 ;
         while  (dr.Read())
        {
            strAreaData  +=   " subcat[ "   +  i1.ToString()  +   " ] = new Array(' "   +  dr[ " areaname " ].ToString()  +   " ',' "   +  dr[ " oneid " ].ToString()  +   " ',' "   +  dr[ " twoid " ].ToString()  +   " '); " ;
            i1 ++ ;

        }
        strAreaData  +=   " onecount= "   +  i1.ToString()  +   " ; " ;

         // 添加三级地区
        strAreaData  +=   " var onecount1;onecount1=0;subcat1 = new Array(); " ;

        strSQL  =   " select * from nts_area where oneid<>0 and twoid<>0 and threeid<>0 order by sort " ;
        cnn.Open();
        cmd.CommandText = strSQL;
        cmd.Connection = cnn;
        dr  =  cmd.ExecuteReader(CommandBehavior.CloseConnection);
         int  n1  =   0 ;
         while  (dr.Read())
        {
            strAreaData  +=   " subcat1[ "   +  n1.ToString()  +   " ] = new Array(' "   +  dr[ " areaname " ].ToString()  +   " ',' "   +  dr[ " oneid " ].ToString()  +   " ',' "   +  dr[ " twoid " ].ToString()  +   " ',' "   +  dr[ " threeid " ].ToString()  +   " '); " ; n1 ++ ;

        }
        dr.Close();
        strAreaData  +=   " onecount1= "   +  n1.ToString()  +   " ;</script> " ;
    }