Asp.net + jquery + ashx create a three-level Area Selection Control for interaction with the server.

Download source code download source code

Foreground page of the region Control

<% @ 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)
{

// Determine whether the province is selected
If (va! = '0 ')
{
$ (ProvinceValue). val (va );
$ (City). attr ("disabled", false );
$ (Area). attr ("disabled", true );
$ (Area). clearAll ();

// Obtain data through ajax
$. Get (
"AreaHandler. ashx ",
{Type: "sheng", time: new Date (), id: va },
Function (data)
{
MakeOptions (city, data );
}
);

}
}
// Generate the select list
Function MakeOptions (id, data)
{

// Initialization
$ (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 );
}
}

}
// Set the selected index
JQuery. fn. setSelectedIndex = function (index)
{
Var count = this. size ();
If (index> = count | index <0)
{
Alert ("the selected index is out of range ");
}
Else
{
JQuery (this). get (0). selectedIndex = index;
}
}
// Clear all items in the select statement
JQuery. fn. clearAll = function ()
{
JQuery (this). get (0). options. length = 1;

}
// Select a city
Function ChangeCity (va)
{
If (va! = '0 ')
{
$ (Area). attr ("disabled", false );
// Obtain data through ajax
$. Get (
"Handler. ashx ",
{Type: "shi", time: new Date (), id: va },
Function (data)
{
MakeOptions (area, data );
}
);


}
}
// Select a region
Function ChangeArea (va)
{
If (va! = '0 ')
{
$ (AreaValue). val (va );
}
}


</Script>
<Div>
<! -- Save the value of the province and region variable -->
<Asp: HiddenField ID = "hProvince" Value = "0" runat = "server"/>
<Asp: HiddenField ID = "hArea" Value = "0" runat = "server"/>
<! -- In the province list, you can directly obtain the data from the database when refreshing the page .. -->
<Select id = "province" runat = "server" onchange = "ChangeProvince (this. value)">
<Option value = "0" disabled = "disabled"> -- select province. </option>
</Select>
<! -- Wait for ajax to query all cities in the province in the city list and fill them in the city list. -->
<Select id = "city" runat = "server" onchange = "ChangeCity (this. value)">
<Option value = "0"> -- select city -- </option>
</Select>
<! -- Region list -->
<Select id = "area" runat = "server" onchange = "ChangeArea (this. value)">
<Option value = "0"> -- select a partition -- </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
{
// Obtain the province value ==== this is to provide the interface
Public int ProvinceValue
{
Get {return int. Parse (this. hProvince. Value );}
}
// Obtain the address value ==== this is to provide the interface

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

}