The following is the implementation process:
Step one: Prepare the XML file and place it in the root directory of the site named Area.xml
Copy Code code as follows:
<?xml version= "1.0" encoding= "Utf-8"?>
<area>
<province id= "1" name= "Beijing" >
<city id= "1" name= "Beijing" >
<county id= "1" name= "Dongcheng District"/>
<county id= "2" name= "Xicheng District"/>
</city>
</province>
<province id= "2" name= "Hebei province" >
<city id= "1" name= "Shijiazhuang City" >
<county id= "1" name= "Zhengding County"/>
<county id= "2" name= "Lingshou County"/>
</city>
<city id= "2" name= "Hanhan" >
<county id= "1" name= "Huang"/>
<county id= "2" name= "Yongnian County"/>
</city>
</province>
<province id= "3" name= "Hainan Province" >
<city id= "1" name= "Haikou" >
<county id= "1" name= "Longhua area"/>
<county id= "2" name= "Xiuying District"/>
<county id= "3" name= "Meilan District"/>
</city>
<city id= "2" name= "Sanya" >
<county id= "1" name= "Tianya Town"/>
<county id= "2" name= "Fenghuang Town"/>
</city>
</province>
</area>
Step two: Create entity classes that correspond to the elements defined in the XML file.
<province/> corresponding province class
Copy Code code as follows:
public class Province
{
private string ID;
<summary>
Number
</summary>
public string Id
{
get {return ID;}
set {id = value;}
}
private string name;
<summary>
Name
</summary>
public string Name
{
get {return name;}
set {name = value;}
}
}
<city/> corresponding City class:
Copy Code code as follows:
public class city
{
private string ID;
<summary>
Number
</summary>
public string Id
{
get {return ID;}
set {id = value;}
}
private string name;
<summary>
Name
</summary>
public string Name
{
get {return name;}
set {name = value;}
}
}
<county/> corresponding County class:
Copy Code code as follows:
public class County
{
private string ID;
<summary>
Number
</summary>
public string Id
{
get {return ID;}
set {id = value;}
}
private string name;
<summary>
Name
</summary>
public string Name
{
get {return name;}
set {name = value;}
}
}
Step three: Write the server-side handler class: Handler.cs
Copy Code code as follows:
<summary>
2///Processing Program
3///</summary>
4 public class Handler:ihttphandler
5 {
6
7 private static XDocument doc;
8 private String FilePath = HttpContext.Current.Server.MapPath ("~/area.xml");
9//javascript Serialization Class
private static JavaScriptSerializer JSS = new JavaScriptSerializer ();
public void ProcessRequest (HttpContext context)
{
Context. Response.ContentType = "Text/plain";
string result = "failure";//default returns results to failure
HttpRequest req = context. Request;
String province = req["province"];//gets the number of the province selected by the user
String city = req["Cities"];//Gets the number of the user-selected municipality
string county = req["County"];//gets the number of the county selected by the user
String type = req["type"];//gets the type of provincial and county list that the user needs to obtain
Initdoc ();
if (type. HasValue ())
{
Switch (type. ToLower ())
{
Case "province"://If the user needs to get a provincial list
result = JSS. Serialize (Getprovincelist ());
Break
Case "City"://If the user needs to get a list of cities
result = JSS. Serialize (Getcitylistbyprovince (province));
Break
Case "County"://If the user needs to get a county list
result = JSS. Serialize (Getcountylistbycity (province, city));
Break
Default
Break
}
}
Return the results to the client in the form of text
Context. Response.Write (Result);
}
<summary>
Initializing Document objects
</summary>
private void Initdoc ()
{
if (doc = = null)
{
doc = Xdocument.load (FilePath);
}
}
<summary>
Initialize the list of provinces
</summary>
Private list<province> getprovincelist ()
{
list<province> list = new list<province> ();
if (Doc!= null)
{
XElement root = Doc. Root;
foreach (var prov in root). Xpathselectelements ("province"))
{
List. Add (New Province ()
{
Id = Prov. Attribute ("id"). Value,
Name = Prov. Attribute ("name"). Value
});
}
}
return list;
}
<summary>
Get the city level number according to the provincial number
</summary>
<param name= "Provid" > Provincial number </param>
Private list<city> getcitylistbyprovince (string provid)
{
list<city> list = new list<city> ();
if (Doc!= null)
{
XElement root = Doc. Root;
XPath expression:/area/province[@id = ' 1 ']/city
String Querypath = "/area/province[@id = '" + provid + "']/city";
foreach (Var city in Root). Xpathselectelements (Querypath))
{
List. ADD (New city ()
{
Id = City. Attribute ("id"). Value,
Name = City. Attribute ("name"). Value
});
}
}
return list;
}
<summary>
To obtain the county number according to the provincial number and city level number
</summary>
<param name= "Provid" > Provincial number </param>
<param name= "Cityid" > City level number </param>
Private list<county> getcountylistbycity (string provid, String Cityid)
{
list<county> list = new list<county> ();
if (Doc!= null)
{
XElement root = Doc. Root;
String Querypath = "/area/province[@id = '" + provid + "']/city[@id = '" + Cityid + "']/county";
foreach (var county in root). Xpathselectelements (Querypath))
{
List. ADD (New County ()
{
Id = county. Attribute ("id"). Value,
Name = county. Attribute ("name"). Value
});
}
}
return list;
}
public bool IsReusable
{
Get
{
return false;
}
}
}
Here, I use the xpathselectelements (string XPath) method under the System.Xml.XPath namespace and the Xpathselectelement (string XPath) method in query Xml. In the method of obtaining a city number from a provincial number, I used an XPath expression (assuming the incoming provincial number is 1):/area/province[@id = ' 1 ']/city, which begins with "/", which means an absolute path. Since area is the root node so start with area, and then there are province elements below it, and when I want to get the province element with id attribute value 1 in all province elements in the area, I can use/area/province[@id = ' 1 '], That is, after province the condition of [@id = ' 1 '], I get the province element with id attribute of 1 under area. Then I'm going to get all the city under the province element, so just add the/city in the back, so the final XPath expression is:/area/province[@id = ' 1 ']/city.
Also, because the XML for this query is in the root directory of the current Web site, if it is somewhere else, then add namespace to the query
After the values that are read from the XML file are assembled into the corresponding entity objects, I used the Serialize method in the JavaScriptSerializer class under the System.Web.Script.Serialization namespace to serialize the resulting entity objects into JSON data to be returned to the client.
Fourth step: Write HTML and JS.
Copy Code code as follows:
<title> County Three-level linkage Drop-down list </title>
<script src= "Scripts/jquery-1.4.1.min.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (function () {
$.post ("/handler.ashx", {"type": "Province"}, function (data, status) {
if (status = = "Success") {
if (data!= "failure") {
data = $.parsejson (data); Parsing the JSON data returned by the server
for (var i = 0; i < data.length; i++) {
var value = Data[i]. Id + ":" + data[i]. Name; Sets the value of option options, in the form: "Number: Name"
$ ("#province"). Append ("<option value=" + value + "' >" + data[i]. Name + "</option>");
}
}
}
}, "text");
$ ("#province"). Change (function () {
var Selectvalue = $ (this). Val (); Gets the value of the selected provincial option
var provid = selectvalue.split (': ') [0]; Remove number
var provtxt = selectvalue.split (': ') [1]; Remove name
$ ("#txtProvince"). HTML (provtxt); Displays the name of the selected province
$ ("#city"). HTML ("<option>== Please select City ==</option>"); Empty the city when the provincial level changes
$ ("#county"). HTML ("<option>== Please select County ==</option>"); Empty the county when the provincial level changes
$.post ("/handler.ashx", {"province": Provid, "type": "City"}, function (data, status) {
if (status = = "Success") {
if (data!= "failure") {
data = $.parsejson (data);
for (var i = 0; i < data.length; i++) {
var value = Data[i]. Id + ":" + data[i]. Name;
$ ("#city"). Append ("<option value=" + value + "' >" + data[i]. Name + "</option>");
}
}
}
}, "text");
});
$ ("#city"). Change (function () {
var provid = $ ("#province"). Val (). Split (': ') [0];
var Selectvalue = $ (this). Val (); Ditto
var Cityid = selectvalue.split (': ') [0]; Ditto
var citytxt = selectvalue.split (': ') [1]; Ditto
$ ("#txtCity"). HTML (citytxt); Displays the name of the selected city
$ ("#county"). HTML ("<option>== Please select County ==</option>"); Ditto
$.post ("/handler.ashx", {"province": Provid, "City": Cityid, "type": "County"}, function (data, status) {
if (status = = "Success") {
if (data!= "failure") {
data = $.parsejson (data);
for (var i = 0; i < data.length; i++) {
var value = Data[i]. Id + ":" + data[i]. Name;
$ ("#county"). Append ("<option value=" + value + "' >" + data[i]. Name + "</option>");
}
}
}
}, "text");
});
$ ("#county"). Change (function () {
$ ("#txtCounty"). HTML ($ (this). Val (). Split (': ') [1]); Displays the name of the selected county
});
});
</script>
<body>
<!--province-->
<select id= "province" Name= "province" >
</select>
<!--City-->
<select id= "City" name= "City" >
</select>
<!--County-->
<select id= "County" name= "County" >
</select>
<br/>
<span id= "txtprovince" style= "color: #ff0000;" ></span>-<span id= "txtcity" style= "color: #ff0000;" ></span>-<span id= "txtcounty" style= "color: #ff0000;" ></span>
</body>
about using jquery to communicate with the server, I'm using the $.post method, which can refer to the jquery official documentation, and here's what I want to say, After traversal through the object. Property access, the name of this property is case-sensitive, the name is the name of the server-side definition, because the server is serialized as a server-side entity object.
In this example, the key point is how to use an XPath expression to invoke the Xpathselectelements (string XPath) method under the System.Xml.XPath namespace.
The final results are shown below:
Code 13,31,50 lines can be optimized.
It is not recommended to modify the DOM structure more than once, you can stitch the string once append
The data source is XML, and I use XSLT to parse the XML direct output <option>, so that you don't have to splice the strings in the foreground. Requires that all node IDs not have the same.
Copy Code code as follows:
<select id= "province" Name= "province" next= "#city" >
</select >
<select id= "Cities" name= "City" next= "#county" >
<option>== Please select the town ==</option>
</sele Ct>
</form>
<select id= "County" name= "County" >
<option>== Please select County ==</option>
</select>
<script type= "Text/javascript" >
$ ("#province, #city"). Change (function () {
var nextselect = $ (This.getattribute ("Next"));
//if (nextselect.size () > 0) {
Nextselect.find ("option:gt (0)"). Remove ();
var _id = $ (this). Find ("option:selected"). Val ();
var query = {parentid: _id};
$.get ("/handler.ashx", query, function (data, status) {
//...
Nextselect.append ("<OPTION>...</OPTION> ...");
});
//}
});
</script>
