Using AJAX to implement city drop-down boxes

In the blog park to learn a lot of practical things, now slowly began to write their own blog articles, because I have limited level, just out of the campus of the small rookie, in addition, the article in the formulation and code aspects if there is inappropriate, welcome criticism. Leave You

The footprints, welcome comments!

What are the problems, can discuss each other, and hope to help you. Let's start talking.

A real city drop-down box interface

HTML code:

<table>            <tr>                <td>
JS code: I use the jquery operation Dom and Ajax here, so to import jquery script, here is not provided, to the official website download has
$ (function() {getcity (0)///When the page loads the first data on the real database, be sure to add $ ("#selNation"). Change (function() {//When the provincial level changes, let the city and county text empty $ ("#selCity option")). Remove (); $ ("#litel option"). Remove (); Get the provincial id var id = $ ("#selNation option:selected"). attr ("id"); Query the provincial-level data getcity (ID, ' City '); }) $ ("#selCity"). Change (function() {//When the city level changes, let the county text empty $ ("#litel option"). Remove (); Get the city-level ID var id = $ ("#selCity option:selected"). attr ("id"); Query the county-level data getcity (ID, ' County '); })//solve similar situation in Beijing with only one city $ ("#selCity"). Click (function () {$ ("#litel option" ). Remove (); var id = $ ("#selCity option:selected"). attr ("id" ); Getcity (ID, ' County ' );})}); function  getcity (PID, c) {var Loadcityurl = $ ("#LoadCityUrl"). Val ();//Get the URL that you want to access in the background, which is accessed from the class in which the background code is located//perform an AJAX request $.ajax ({url:loadcityurl, data: "id=" + PID, type: ' Get ', success:function  (res) {var arr = eval (res); The JSON data returned must be performed Evel () method to use the loop to read the data, it is important here; $.each (arr, function  (key, value) {if (pid = = "0") {// Load the provincial level drop-down box (the database has a provincial pid of 0) $ ("#selNation"). Append ("<option id=" + value.tb_areaid + "' >" + value. AreaName + "</option>" ); } else  {if (c = = ' city ') {//Load municipal drop-down box $ ("#selCity"). Append ("<option id=" + Value.tb_areaid + ">" + value. AreaName + "</option>" ); } else {//load County drop-down box $ ("#litel"). Append ("<option id=" + Value.tb_areaid + ">" + value. AreaName + "</option>" ); } } }) } });}
The code for the background query database:
1. Return JSON data
#region Shipping address = Show City drop-down box +selectnation (int id)///<summary>////        Shipping address =//</summary//City drop-down box        >//        <param name= "id" ></param>//        <returns></returns> public        string selectnation (int id)        {            //returns JSON data similar to: ("[{' name ': ' Guangdong ', ' id ': ' 1 '}, {' name ': ' Beijing ', ' id ': ' 2 '}, {' name ': ' Lake South ', ' ID ': ' 3 '}] ")                    list<tb_area> List = null;            List = Mbsc.tb_Area.Where (c = = C.areapid = = ID). ToList ();//I'm using LINQ expressions to query the data, you can also query the data in other ways            //If the ID is not empty, the list            of cities returning to the province System.Web.Script.Serialization.JavaScriptSerializer Json = new  System.Web.Script.Serialization.JavaScriptSerializer ();            String str = json.serialize (list);//json serialization set            return str;        } #endregion    
2. Model Code
public class Tb_area    {public        int Tb_areaid {set; get;}        public string AreaName {set; get;}        public int Areapid {set; get;}    }   
Database
HTTP://PAN.BAIDU.COM/S/1GDW1OSJ click the link to download, here is the TXT file, import the database is a comma delimiter, note the database sub-field naming is
Run the Success page
Well, it's done, if there's any problem. Welcome comments!!!
Using AJAX to implement city drop-down boxes