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 in 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 in the class where the background code is located//perform Ajax Request $.ajax ({url:loadcityurl, data: "id=" + PID, type: ' Get ', success:function (res) {var arr = eval (res); The number of JSON returnedIt is important to execute the EVEL () method in order to use the loop to read the data: $.each (arr, function (key, value) {if (pid = = "0") {//Load Provincial drop-down box (database -level PID is 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 + "' >" + VA Lue.                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 ': ' Hunan ', ' 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