ajax省市縣聯動

 HTML代碼

 

1. <form id="form1" runat="server">
2.     <div>
3.         <div id="dv">
4.         <table>
5.             <tr>
6.             <td><asp:DropDownList ID="ddlProvince" runat="server" onchange="ProvinceChange()"></asp:DropDownList></td>
7.             <td><select ID="ddlCity" runat="server" onchange="CityChange()"></select></td>
8.             <td><select ID="ddlArea" runat="server"></select></td>
9.             </tr>
10.         </table>
11.             <br />
12.             <asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="查看省市縣" /></div>
13.     <script>
14.         
15.         function ProvinceChange()
16.         {
17.             var obj = document.getElementById("ddlProvince").options[document.getElementById("ddlProvince").selectedIndex];
18.             var city = document.getElementById("ddlCity");
19.             var area = document.getElementById("ddlArea");
20.             var strcitys =  _Default.getParent(obj.value).value;
21.             if(strcitys.indexOf(",")>0)
22.             {
23.                 city.length=0;
24.                 city.options[0] = new Option("請選擇","-1");
25.                 area.length=0;
26.                 area.options[0] = new Option("請選擇","-1");
27.                 var citys = strcitys.split("-");
28.                 for(var i=0;i<citys.length;i++)
29.                 {
30.                     city.options[i+1] = new Option(citys[i].split(",")[0], citys[i].split(",")[1]);
31.                 }
32.             }
33.             else
34.             {
35.                 city.length=0;
36.                 city.options[0] = new Option("請選擇","-1");
37.             }
38.         }
39.         
40.          function CityChange()
41.         {
42.             var obj = document.getElementById("ddlCity").options[document.getElementById("ddlCity").selectedIndex];
43.             var city = document.getElementById("ddlArea");
44.             var strcitys =  _Default.getParent(obj.value).value;
45.             if(strcitys.indexOf(",")>0)
46.             {
47.                 city.length=0;
48.                 city.options[0] = new Option("請選擇","-1");
49.                 var citys = strcitys.split("-");
50.                 for(var i=0;i<citys.length;i++)
51.                 {
52.                     city.options[i+1] = new Option(citys[i].split(",")[0], citys[i].split(",")[1]);
53.                 }
54.             }
55.             else
56.             {
57.                 city.length=0;
58.                 city.options[0] = new Option("請選擇","-1");
59.             }
60.         }
61.     </script>
62.     </div>
63.     </form>

 

 

CS代碼

 

 

1. public sqlDMO sqldmo = new sqlDMO();
3.     protected void Page_Load(object sender, EventArgs e)
4.     {
5.         
6.         if (!IsPostBack)
7.         {
8.             setProvince();
9.             ListItem listCity = new ListItem("請選擇", "-1");
10.             ddlCity.Items.Insert(0, listCity);
11.             ListItem listArea = new ListItem("請選擇", "-1");
12.             ddlArea.Items.Insert(0, listArea);
13.         
14.         }
15.         AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
16.     }
18.     private void setProvince()
19.     {
20.         DataTable dtProvince = sqldmo.Query("select ass_id as id,ass_dis as name from assort where ass_name='province'");
21.         ddlProvince.DataSource = dtProvince;
22.         ddlProvince.DataTextField = "name";
23.         ddlProvince.DataValueField = "id";
24.         ddlProvince.DataBind();
25.         ListItem listProvince = new ListItem("請選擇", "-1");
26.         ddlProvince.Items.Insert(0, listProvince);
27.     }
29.     [AjaxPro.AjaxMethod]
30.     public string getParent(string parentID)
31.     {
32.         DataTable dtCity = sqldmo.Query("select ass_id as id,ass_dis as name from assort where ass_fid='" + parentID + "'");
33.         string strCity = "";
34.         for (int i = 0; i < dtCity.Rows.Count; i++)
35.         {
36.             strCity += dtCity.Rows[i]["name"].ToString().Trim() + "," + dtCity.Rows[i]["id"].ToString().Trim() + "-";
37.             if (i == dtCity.Rows.Count - 1) strCity = strCity.Substring(0, strCity.Length - 1);
38.         }
39.     
40.         return strCity;
41.     }