Examples of AJAX applications in provinces, cities and districts based on jquery

Believe that the front-end should be useful or listen to the provincial urban linkage Ajax, although I have heard before, but this is the first time in the project encountered, so tidy up their application and summary.

The first is based on the absence of default values, to provide users with the choice of the provinces and Cities drop-down menu, I believe this should be the most understandable, here is no longer repeat. Let's talk about the application of Ajax in the provinces and cities I met in the project:

In the project I need to edit the user information in a frame, which includes the big area, the province, the city information (this is similar to the provinces and Cities linkage processing method). At this time I need to click on the Edit button to the user's basic information through the data-* data to the frame page, in the frame page need to display information. So after the value is passed, I have to judge whether the value of the large area is the same as the existing value (the value in the database or the value of the page to write dead), if I need to display the corresponding value in the frame page, the province, the city is similar. The code is as follows:
Page Layout Section code example:

<div class= "formboxlist fl ml85 mt20 wd250" >
<p class= "words fl wd85 TR" > Major area <span>*</span>:</p>
<select class= "fr mt3 bgyellow editdistrictselect" name= "res_region_id" >
<option value= "1" data-id= "1" > North China Metropolitan Area </option>
<option value= "2" data-id= "2" > North Nord </option>
<option value= "3" data-id= "3" > East China Region </option>
<option value= "4" data-id= "4" > Central China Region </option>
<option value= "5" data-id= "5" > South China Region </option>
<option value= "6" data-id= "6" > Northwest Region </option>
<option value= "7" data-id= "7" > Southwest area </option>
</select>
</div>

<div class= "formboxlist fl ml25 mt20 wd275" >
<p class= "words fl wd110 tr" > Province (municipality) <span>*</span>:</p>
<select class= "fr mt3 bgyellow editprovinceselect" name= "res_province_id" >
</select>
</div>
<div class= "formboxlist fl ml75 mt20 wd225" >
<p class= "words fl wd60 tr" > City <span>*</span>:</p>
<select class= "fr mt3 bgyellow editcityselect" name= "res_city_id" >
</select>
</div>

The JS processing code is as follows:

The Table bullet box appears when you modify the button
$ (". Editbtn"). Click (function () {
$ (". Blackbg,.edit-formbox"). Show ();

var name = $ (this). Data ("name");
var phone = $ (this). Data ("Phone");
var QQ = $ (this). Data ("QQ");
var email = $ (this). Data ("email");

var organization = $ (this). Data ("organization");
var department = $ (this). Data ("department");
var job = $ (this). Data ("job");

var region_id = $ (this). Data ("RegionID");
var province_id = $ (this). Data ("Provinceid");
var city_id = $ (this). Data ("Cityid");

var admin_id = $ (this). Data ("admin_id");

$ (". Edit-formbox"). Find (". Editname"). Val (name);
$ (". Edit-formbox"). Find (". Editphone"). Val (phone);
$ (". Edit-formbox"). Find (". Editqq"). Val (QQ);
$ (". Edit-formbox"). Find (". Editemail"). Val (email);

$ (". Edit-formbox"). Find (". Editorganization"). val (organization);
$ (". Edit-formbox"). Find (". Editdepartment"). Val (department);
$ (". Edit-formbox"). Find (". Editjob"). Val (Job);

$ (". admin_id"). Val (admin_id);

Modify Area
var chosetext = "<option value= ' 0 ' >-please select-</option>";

$ (". Editdistrictselect"). Find ("option"). each (function () {
if ($ (this). val () = = region_id) {
$ (this). attr ("Selected", "Selected");
}
});

var id = region_id;
var url= ' {path (' Zm_admin_get_admin_province_ajax ', {' id ': ' Text '}}} ';
url = url.replace ("text", id);

$.ajax ({
Type: "Get",
Url:url,
Data:{res_region_id:id},
DataType: "JSON",
Success:function (data) {
var regionid = province_id;

var length=data.length;
for (Var i=0;i&lt;length;i++) {
var region_option = "<option id= ' finish_region_id_op" +data[i].id+ "' value= '" +data[i].id+ "' >" +data[i].name+ " </option> ";
$ (". Editprovinceselect"). Append (region_option);
if (regionid==data[i].id) {
$ ("#finish_region_id_op" +data[i].id). attr ("Selected", "Selected");
}
}
}
});

$ ('. Editdistrictselect '). Change (function () {
$ (". Editprovinceselect"). empty ();
$ (". Editprovinceselect"). Append (Chosetext);
$ (". Editcityselect"). empty ();
$ (". Editcityselect"). Append (Chosetext);

var id = $ (". Editdistrictselect option:selected"). Data ("id");
var url= ' {path (' Zm_admin_get_admin_province_ajax ', {' id ': ' Text '}}} ';
url = url.replace ("text", id);

$.ajax ({
Type: "Get",
Url:url,
Data:{res_region_id:id},
DataType: "JSON",
Success:function (data) {

var length=data.length;
for (Var i=0;i&lt;length;i++) {
var region_option = "<option id= ' finish_region_id_op" +data[i].id+ "' value= '" +data[i].id+ "' >" +data[i].name+ " </option> ";
$ (". Editprovinceselect"). Append (region_option);
}
}
});
});

Selection-appearance of the city
$ ('. Editprovinceselect '). Change (function () {
$ (". Editcityselect"). empty ();
$ (". Editcityselect"). Append (Chosetext);

var id = $ (". Editprovinceselect"). Val ();
var url= ' {path (' Zm_shop_get_city_ajax ', {' id ': ' Text '}}} ';
url = url.replace ("text", id);
$.ajax ({
Type: "Get",
Url:url,
Data:{res_region_id:id},
DataType: "JSON",
Success:function (data) {
var length=data.length;

for (Var i=0;i&lt;length;i++) {
var city_option = "<option id= ' origin_city_id_op" +data[i].id+ "' value= '" +data[i].id+ "' > ' +data[i].name+" </ Option> ";
$ (". Editcityselect"). Append (city_option);

}

}
});
});

if ($ (". Editprovinceselect"). Text ()!== "-Please Select-") {
var id = province_id;
var url= ' {path (' Zm_shop_get_city_ajax ', {' id ': ' Text '}}} ';
url = url.replace ("text", id);
$.ajax ({
Type: "Get",
Url:url,
Data:{res_region_id:id},
DataType: "JSON",
Success:function (data) {
var length=data.length;
var Cityid = city_id;

for (Var i=0;i&lt;length;i++) {
var city_option = "<option id= ' origin_city_id_op" +data[i].id+ "' value= '" +data[i].id+ "' > ' +data[i].name+" </ Option> ";
$ (". Editcityselect"). Append (city_option);
if (cityid==data[i].id) {
$ ("#origin_city_id_op" +data[i].id). attr ("Selected", "Selected");
}
}

}
});
}

});

To see more clearly, post a data-* code:

<a class= "editbtn fl ml20 mt5" style= "float:left;" margin-left:20px;margin-right:10px "javascript:;" href= Name= ' {{item.name}} ' data-phone= ' {{item.phone}} ' data-qq= ' {{item.qq}} ' data-email= ' {{item.email}} ' data-cityid= ' {{ ITEM.CITY_ID}} ' data-provinceid= ' {{item.province_id}} ' data-regionid= ' {{item.region_id}} ' data-region= ' {{ Item.region_name}} ' data-province= ' {{item.province_name}} ' data-city= ' {{item.city_name}} ' data-organization= ' {{ Item.organization}} ' data-department= ' {{item.department}} ' data-job= ' {item.job}} ' data-admin_id = ' {{item.admin_id } "> Edit </a>