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;
        }
    }
   
}