asp.net+jquery+ashx打造三级无刷新地区选择控件

 地区控件的前台页面

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="AreaSelect.ascx.cs" Inherits="control_AreaSelect" %>



   <script type="text/javascript">

        

         var area="#<%=area.ClientID %>";

         var city="#<%=city.ClientID %>";

         var provinceValue="#<%=hProvince.ClientID %>";

         var areaValue="#<%=hArea.ClientID %>";

     function ChangeProvince(va)

     { 

       

       //判断有没有选择省

                         if(va!='0')

                         {  

                             $(provinceValue).val(va);

              $(city).attr("disabled",false);

              $(area).attr("disabled",true);

                    $(area).clearAll();

                   

                    //ajax获取数据

                   $.get(

                        "AreaHandler.ashx", 

                        { type: "sheng", time:new Date(),id:va },

                                   function(data)

                                   {  

                                     MakeOptions(city,data);

                                   }

                                );

              

      }

     }

     //生成select列表

     function MakeOptions(id,data)

     {   

        

         //初始化

           $(id).clearAll();

           $(id).setSelectedIndex(0);  

         if(data.indexOf(",")!=-1)

         {

        var classList=data.split("|");

           for(var i=0;i<classList.length;i++)

      { 

        var tmp=classList[i].split(",");

           $("<option value="+tmp[0]+">"+tmp[1]+"</option>").appendTo(id);

         }

         }

            

     }

     //设置选中指定索引项   

                        jQuery.fn.setSelectedIndex = function(index)   

                         {   

                            var count = this.size();       

                            if(index >= count || index < 0)   

                                {   

                                  alert("选中项索引超出范围");   

                                 }   

                            else  

                               {   

                               jQuery(this).get(0).selectedIndex = index;   

                               }   

                              }  

     //清除select中的所有项   

                     jQuery.fn.clearAll = function()   

                    {    

                         jQuery(this).get(0).options.length = 1; 

                         

                    } 

                    //选择城市

     function ChangeCity(va)

     {

         if(va!='0')

         {

             $(area).attr("disabled",false);

              //ajax获取数据

                   $.get(

                        "Handler.ashx", 

                        { type: "shi", time:new Date(),id:va },

                                   function(data)

                                   {

                                      MakeOptions(area,data);

                                   }

                                );

               

          

         }

     }

     //选择地区

     function ChangeArea(va)

     {  

          if(va!='0')

          { 

             $(areaValue).val(va);

          }

     }

     

           

   </script>

 <div>    

             <!--保存省和地区变量的值-->

             <asp:HiddenField ID="hProvince" Value="0" runat="server" />

             <asp:HiddenField ID="hArea" Value="0" runat="server" />

             <!--省份列表  这里的数据刷新页面时直接去数据库得到。。-->

   <select id="province"  runat="server" onchange="ChangeProvince(this.value)">

            <option value="0" disabled="disabled">--请选择省--</option>

            </select>

   <!--城市列表  等到ajax查询出该省份的所有城市，用填充到城市列表中-->

   <select id="city" runat="server" onchange="ChangeCity(this.value)">

            <option value="0">--请选择市--</option>

   </select>

     <!--地区的列表 -->

   <select id="area" runat="server" onchange="ChangeArea(this.value)" >

   <option value="0">--请选择区--</option>

   </select>

     

</div>

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;



public partial class control_AreaSelect : System.Web.UI.UserControl

{

   //获取省份选择的值  ===这个是为了提供接口

     public int ProvinceValue

     {   

         get{return int.Parse(this.hProvince.Value);}

     }

     //获取地址选择的值 ===这个是为了提供接口



     public int AreaValue

     {

        get { return int.Parse(this.hArea.Value); }

     }



    protected void Page_Load(object sender, EventArgs e)

    {

        if (!Page.IsPostBack)

        {

            com.hbwl.BLL.base_Provincial province = new com.hbwl.BLL.base_Provincial();

            DataSet ds = province.GetList();

            string code, name;

            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)

            {



                code = ds.Tables[0].Rows[i]["ProvincialID"].ToString();

                name = ds.Tables[0].Rows[i]["ProvincialName"].ToString();

                this.province.Items.Add(new ListItem(name, code));

            }



            this.city.Disabled = true;

            this.area.Disabled = true;

            hProvince.Value = this.sheng.Value;

            hArea.Value = this.area.Value;

        }

    }

    

}