JQuery+WebService实现DropDownlist无刷新三级联动

本文的一些内容是参考互联网上的,所以有部分是相似的,请原作者谅解(时间久远,找不到出处了).

 

一,数据源为SQL Server

采用的是国内的省市县三级的数据库.具体的数据库请看脚本.
http://files.cnblogs.com/conan304/CitySQL.zip

 

二,前台代码端

    地址： &nbsp;   &nbsp; < asp:DropDownList  ID ="ddlProvince"  runat ="server" ></ asp:DropDownList >
    &nbsp;   &nbsp;   < asp:DropDownList  ID ="ddlCity"  runat ="server" ></ asp:DropDownList > 

   &nbsp;&nbsp;<asp:DropDownList ID="ddlArea" runat="server"></asp:DropDownList>

   

三,Jquery代码

< script type = " text/javascript "  language = " javascript "  src = " Script/jquery-1.4.1.min.js " >< / script>
< script type = " text/javascript "  language = " javascript " >
    $( function () {         

         var  $dp1  =  $( " #ddlProvince " );
         var  $dp2  =  $( " #ddlCity " );
         var  $dp3  =  $( " #ddlArea " );
        $dp1.focus();

        loadAreas( " 0 " ,  " 0 " );

        $dp2[ 0 ].disabled  =   true ;
        $dp3[ 0 ].disabled  =   true ;

        $dp1.bind( " change keyup " ,  function () {
             if  ($( this ).val()  !=   "" ) {
                 var  strPid  =  $dp1.attr( " value " );  // 获取城市
                loadAreas(strPid,  " 1 " );
                $dp2[ 0 ].disabled  =   false ;
            }  else  {
                $dp2[ 0 ].disabled  =   true ;
                $( " #ddlCity " ).html( "" );
                $( " #ddlCity " ).append( " <option value='' selected='selected'>请选择城市名称</option> " );

                $( " #ddlArea " ).html( "" );
                $( " #ddlArea " ).append( " <option value='' selected='selected'>请选择地区名称</option> " );
            }
            $dp3[ 0 ].disabled  =   true ;
        });
        $dp2.bind( " change keyup " ,  function () {
             var  strCId  =  $dp2.attr( " value " );  // 获取城市
             if  ($( this ).val()  !=   "" ) {
                loadAreas(strCId,  " 2 " );
                $dp3[ 0 ].disabled  =   false ;
            }  else  {
                $dp3[ 0 ].disabled  =   true ;
                $( " #ddlArea " ).html( "" );
                $( " #ddlArea " ).append( " <option value='' selected='selected'>请选择地区名称</option> " );
            }
        });
    });

     function  loadAreas(selectedItem, level) {
        $.ajax({
            type:  " GET " ,
            contentType:  " application/json; charset=utf-8 " ,
            url:  " Ajax/CityGet.asmx/CityInfoGet " ,
            data: encodeURI( " parentID=' "   +  selectedItem  +   " ' " ),
            dataType:  " json " ,
            success:  function (result) {
                 switch  (level) {
                     case   " 0 " :
                        $( " #ddlProvince " ).html( "" );
                        $( " #ddlProvince " ).append( " <option value='' selected='selected'>请选择省份</option> " );

                        $( " #ddlCity " ).html( "" );
                        $( " #ddlCity " ).append( " <option value='' selected='selected'>请选择城市名称</option> " );

                        $( " #ddlArea " ).html( "" );
                        $( " #ddlArea " ).append( " <option value='' selected='selected'>请选择地区名称</option> " );

                         for  ( var  i  =   0 ; i  <  result[ " d " ].length; i ++ ) {
                            $( " #ddlProvince " ).append($( " <option></option> " ).val(result[ " d " ][i].CodeID).html(result[ " d " ][i].CityName));
                        };
                         break ;
                     case   " 1 " :
                        $( " #ddlCity " ).html( "" );
                        $( " #ddlCity " ).append( " <option value='' selected='selected'>请选择城市名称</option> " );

                        $( " #ddlArea " ).html( "" );
                        $( " #ddlArea " ).append( " <option value='' selected='selected'>请选择地区名称</option> " );

                         for  ( var  i  =   0 ; i  <  result[ " d " ].length; i ++ ) {
                            $( " #ddlCity " ).append($( " <option></option> " ).val(result[ " d " ][i].CodeID).html(result[ " d " ][i].CityName));
                        };
                         break ;
                     case   " 2 " :
                        $( " #ddlArea " ).html( "" );
                        $( " #ddlArea " ).append( " <option value='' selected='selected'>请选择地区名称</option> " );
                         for  ( var  i  =   0 ; i  <  result[ " d " ].length; i ++ ) {
                            $( " #ddlArea " ).append($( " <option></option> " ).val(result[ " d " ][i].CodeID).html(result[ " d " ][i].CityName));
                        };
                         break ;

                     default :
                         break ;
                }

            },
            error:  function (x, e) {
                alert(x.responseText);
            }
        });
    }

</script> 

 

四,c#代码 

1,WebService,位于AJAX文件夹下:

using  System.Collections.Generic;
using  System.Web.Script.Services;
using  System.Web.Services;

///   <summary>
/// CityGet 的摘要说明
///   </summary>
[WebService(Namespace  =   " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo  =  WsiProfiles.BasicProfile1_1)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 
 [System.Web.Script.Services.ScriptService]
public   class  CityGet : System.Web.Services.WebService
{

     public  CityGet()
    {

         // 如果使用设计的组件，请取消注释以下行 
         // InitializeComponent(); 
    }


     ///   <summary>
     ///  获取城市信息,用Json返回
     ///   </summary>
     ///   <param name="parentID"></param>
     ///   <returns></returns>
    [WebMethod]
    [ScriptMethod(ResponseFormat  =  ResponseFormat.Json, UseHttpGet  =   true )]
     public  IList < Model.CityInfo >  CityInfoGet( string  parentID)
    {
        IList < Model.CityInfo >  list  =  BLL.City.CityInfo.CityListFindByParentID( int .Parse(parentID));
         return  list;
    }

} 

 

 多层架构调用,省略了中间的DALFactory,IDal等.这里仅仅写出访问数据库的代码:

using  System.Collections.Generic;
using  System.Data;
using  System.Data.SqlClient;
using  System.Text;

namespace  SQLServer.City
{
     public   class  CityInfo : IDAL.City.ICityInfo
    {
         ///   <summary>
         ///  根据父级ID获取城市信息
         ///   </summary>
         ///   <param name="CodeID"></param>
         ///   <returns></returns>
         public  IList < Model.CityInfo >  CityListFindByParentID( int  CodeID)
        {
            IList < Model.CityInfo >  listCity  =   new  List < Model.CityInfo > ();

            StringBuilder sql  =   new  StringBuilder();
            sql.Append( "     SELECT [codeid],[parentid],[cityName] " );
            sql.Append( "     FROM [tbl_province] " );
            sql.Append( "     WHERE parentid=@parentid " );            
            sql.Append( "     ORDER BY codeid " );

            SqlParameter param  =   new  SqlParameter( " @parentid " , SqlDbType.Int);
            param.Value  =  CodeID;


             using  (SqlDataReader dr  =  SQLHelper.ExecuteReader(CommandType.Text, sql.ToString(), param))
            {
                 while  (dr.Read())
                {
                    Model.CityInfo city  =   new  Model.CityInfo
                    {
                        CodeID  =  dr.GetInt32( 0 ),
                        ParentID  =  dr.GetInt32( 1 ),
                        CityName  =  dr.GetString( 2 ).Trim()
                    };
                    listCity.Add(city);
                }
            }

             return  listCity;
        }
    }

} 

 

Model:

namespace  Model
{
     ///   <summary>
     ///  城市信息
     ///   </summary>
     public   class  CityInfo
    {
         ///   <summary>
         ///  城市的ID
         ///   </summary>
         public   int  CodeID {  get ;  set ; }

         ///   <summary>
         ///  城市的父级ID
         ///   </summary>
         public   int  ParentID {  get ;  set ; }

         ///   <summary>
         ///  城市的名称
         ///   </summary>
         public   string  CityName {  get ;  set ; }
    }

}