三级下拉联动代码

  前台页面 js，

 

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title ></ title >

     < script  src ="jquery-1.3.2.min.js"  type ="text/javascript" ></ script >
     < script  language ="javascript"  type ="text/javascript" >
         var  fackData;  //  数据库，先读取出来

         function  Load(selObj, targetObj) {
            $.ajax({
                url:  ' GetRegionHandler.ashx ' ,
                data:  " pid= "   +  selObj,
                dataType:  ' html ' ,
                contentType:  ' application/html;charset=utf-8 ' ,
                cache:  false ,
                success:  function (data) {
                     // 根据返回值data.d判断是不是成功

                    fackData  =  data;
                    Change( 0 ,  " province " );
                    Change($( " #province option:selected " ).val(),  " city " );
                    Change($( " #city option:selected " ).val(),  " area " );
                },
                error:  function (xhr) {
                     // 中间发生异常，查看xhr.responseText
                    alert( " 异常 " );
                }
            });
        }

         //  在选择时，改变值
         function  Change(parentId, targetObj) {
             var  dataRow  =  fackData.toString().split( ' @ ' );
             $( " # "   +  targetObj).empty();
              for  ( var  i  =   0 ; i  <  dataRow.length; i ++ ) {
                  if  (dataRow[i]  !=   "" ) {
                      var  dataCells  =  dataRow[i].toString().split( ' # ' );
                      if  (dataCells[ 2 ]  ==  parentId)
                        $( " # "   +  targetObj).append( " <option value=' "   +  dataCells[ 0 ]  +   " '> "   +  dataCells[ 1 ]  +   " </option> " );

                 }
             }
             if  (targetObj  ==   " province " )
                Change($( " #province option:selected " ).val(),  " city " );
              if  (targetObj  ==   " city " )
                Change($( " #city option:selected " ).val(),  " area " );
        }
     </ script >
</ head >
< body >
    
     < form  id ="form1"  runat ="server" >
     < div >
         < select  id ="province"  onchange ="Change(this.options[this.options.selectedIndex].value, 'city')" ></ select >
         < select  id ="city"  onchange ="Change(this.options[this.options.selectedIndex].value, 'area')" ></ select >
         < select  id ="area" ></ select >
         < script  language ="javascript"  type ="text/javascript" >
            Load();
         </ script >
     </ div >
     </ form >
</ body >
</ html >

 

 

 后台页面代码：

 

代码

namespace  DropDownListThreeGrade
{
     ///   <summary>
     ///  $codebehindclassname$ 的摘要说明
     ///   </summary>
    [WebService(Namespace  =   " http://tempuri.org/ " )]
    [WebServiceBinding(ConformsTo  =  WsiProfiles.BasicProfile1_1)]
     public   class  GetRegionHandler : IHttpHandler
    {

         public   void  ProcessRequest(HttpContext context)
        {
            context.Response.ContentType  =   " text/plain " ;
             using  (SqlConnection con  =   new  SqlConnection(ConfigurationManager.ConnectionStrings[ " LocalDBConnectionString " ].ConnectionString))
            {
                con.Open();
                SqlDataAdapter adapter  =   new  SqlDataAdapter( "  select * from region  " , con);
                DataSet ds  =   new  DataSet();
                adapter.Fill(ds);
                System.Text.StringBuilder strBack  =   new  System.Text.StringBuilder();

                 for  ( int  i  =   0 ; i  <  ds.Tables[ 0 ].Rows.Count; i ++ )
                {
                    strBack.Append(ds.Tables[ 0 ].Rows[i][ " id " ].ToString()  +   " # "   +  ds.Tables[ 0 ].Rows[i][ " name " ].ToString()  +   " # "   +  
                        ds.Tables[ 0 ].Rows[i][ " parentId " ].ToString()  +   " @ " );
                }
                context.Response.Write(strBack.ToString());
            }
        }

         public   bool  IsReusable
        {
             get
            {
                 return   false ;
            }
        }
    }
}