Javascript achieves three levels of linkage between provinces, cities, and counties

Address: http://www.cnblogs.com/yujj/archive/2012/10/08/2714712.html

 

According to the information published on the internetCodeWe can find that the province, city, and county have the following rules.

1: province:

 
Select BH, MC from dic_area where BH like '_ 0000' order by BH
 

The rule for obtaining provinces is: the first two digits are different, and the last four digits are both 0.

2. Obtain the city:

 
Select BH, MC from dic_area where BH like substring (BH, 1, 2) + '_ 00' and BH <> substring (BH, 1, 2) + '000000' order by BH // SQL query method
 

 
Select BH, MC from dic_area t where T. bh like '% 00' and substr (T. bh, 4, 1) <> '0' order by T. bh // Oracle Method
 

Obtain the city rule as follows: the first four digits are different, and the next two digits are 00 and not equal to the province rule.

3. Obtain district/county data:

Select BH, MC from dic_area where BH like substring (BH, 1, 4) + '_' and BH <> substring (BH, 1, 4) + '00' order by BH // SQL query method
 

 
Select T. bh, T. MC from dic_dq t where substr (T. bh, 5, 1) <> '0' order by T. bh//Oracle acquisition
 

Obtain the number of districts and counties that have different six-digit numbers and are not equal to the City rules.

Based on these three rules, we only need to use recursion in the background.AlgorithmConcatenate a json data that contains three-level nodes. The specific data format is as follows: for example, the JSON data format of Beijing:

[{"ID": "110000", "name": "Beijing", "Node": [{"ID": "110100", "name": "city jurisdiction ", "nodes": [{"ID": "110101", "name": "Dongcheng District" },{ "ID": "110102", "name ": "Xicheng district" },{ "ID": "110105", "name": "Chaoyang District" },{ "ID": "110106", "name ": "Fengtai District" },{ "ID": "110107", "name": "Shijingshan district" },{ "ID": "110108", "name ": "Haidian District" },{ "ID": "110109", "name": "Mentougou District" },{ "ID": "110111", "name ": "Fangshan District" },{ "ID": "110112", "name": "Tongzhou District" },{ "ID": "110113", "name ": "Shunyi District" },{ "ID": "110114", "name": "Changping District" },{ "ID": "110115", "name ": "Daxing District" },{ "ID": "110116", "name": "Huairou district" },{ "ID": "110117", "name ": "Pinggu district"}] },{ "ID": "110200", "name": "County", "nodes": [{"ID": "110228 ", "name": "Miyun county" },{ "ID": "110229", "name": "Yanqing County"}]
 

After splicing the JSON data format in the background, we can use jquery to encapsulate three levels of association between provinces, cities, and counties in one sentence: the effect is as follows:

<TD id = "cboxarea"> </TD> // html code kth. area. INIT ('# cboxarea ');//JS Code
 

In this way, we can achieve three levels of association between all provinces, cities, and counties.

After obtaining the association between province, city, and county levels, how can we load the code stored in the backend to the province, city, and county saved? We only need to transmit the code of a district, county, and county to callback the code: the code is as follows:

 
Kth. area. INIT ('# cboxarea', '123 ');//The second parameter is the District/County code.Taking changbei development zone as an Example
 

How to Use jquery to create such a function? The Code is as follows:

Kth. area. List = Null ; //  Used to store JSON data Kth. area. citylist = Null ; // Used to store municipal JSON data Kth. area. setarea = Function (){ If (KTH. area. List = Null ) {$. Ajax ({type: 'post', URL: ajaxpath + '/ajax/area. ashx ', //  Ajax for retrieving JSON data Data: {'active': 'selectareabyid'}, async: False , Datatype: 'json', success: Function (JSON) {kth. area. List = JSON; // JSON data is assigned to a variable. }) ;}}; Kth. area. getareaname = Function (Areaid) {kth. area. setarea (); VaR Name = ''; If (KTH. area. list! = Null & Areaid> 0) {$ (KTH. area. List). Each ( Function (){ VaR P = This ; $ (P. node). Each ( Function (){ If (This . ID = areaid) {name = P. Name + ''+ This . Name; Return   False ;}});});} Return Name ;}; //  The target of the main method is the uploaded ID (<TD id = "cboxarea"> </TD>), and areaid is used for data refresh. Kth. area. init = Function (Target, areaid) {kth. area. setarea (); If (KTH. area. list! = Null ){VaR CSS = arguments [3] | 'width: 102px; '; target = $ (target ); VaR Shtml = '<select class = "Province" style = "' + CSS + '"> <option value = ""> please? Select? ? </Option> '; $ (KTH. area. List). Each ( Function () {Shtml + = '<option value = "' + This . ID + '">' + This . Name + '</option> ';}); shtml + = '</SELECT> <select class = "city" style = "' + CSS + '"> <option value = ""> please? Select? ? </Option> </SELECT> <select class = "County" style = "'+ CSS +'"> <option value = ""> please? Select? ? </Option> </SELECT> '; target. find ('select. province, select. city, select. county '). remove (); $ (target ). append (shtml ). find ('select. province '). BIND ('change ', Function (){ VaR PID = $ ( This ). Val (); VaR Shtml = '<option value = ""> please? Select? ? </Option> '; VaR Countyshtml = '<option value = ""> please? Select? ? </Option> '; $ (KTH. area. List). Each ( Function (){ If ( This . ID = PID) {kth. area. citylist = This . Node; $ ( This . Node). Each ( Function () {Shtml + = '<option value = "' + This . ID + '">' + This . Name + '</option> ';});Return   False ;}}); $ ( This Pai.next().html (shtml); $ ( This 2.16.next().next().html (countyshtml) ;}); $ (target). Find ('select. City'). BIND ('change ', Function (){ VaR PID = $ ( This ). Val (); VaR Shtml = '<option value = ""> please? Select? ? </Option> '; $ (KTH. area. citylist). Each ( Function (){If ( This . ID = PID) {$ ( This . Nodes). Each ( Function () {Shtml + = '<option value = "' + This . ID + '">' + This . Name + '</option> ';}); Return   False ;}}); $ ( This Pai.next().html (shtml );}); // Data callback implementation            If (Areaid> 0 ){ VaR Cityid = areaid. Slice (0, 4) + '00 '; VaR Provinceid = areaid. Slice (0, 2) + '123 '; VaR F = False ; $ (KTH. area. List). Each ( Function () {Kth. area. citylist = This ; $ ( This . Node). Each ( Function (){If ( This . Id = cityid) {$ (target ). find ('select. province '). val (provinceid ). change (). end (). find ('select. city '). val (cityid ). change (). end (); F = True ; Return   False ;}}); If (F ){ Return   False ;}}); $ (KTH. area. citylist). Each ( Function () {$ (This . Nodes). Each ( Function (){ If ( This . ID = areaid) {$ (target). Find ('select. County '). Val (areaid); F = True ; Return   False ;}}); If (F ){ Return   False ;}});}}};

After carefully reading the Code, it is not difficult to find that the method for obtaining data from all provinces is to loop the first level of JSON data, retrieving Municipal Data is a circular comparison of the first-level JSON data sub-nodes of the province to be loaded. Obtaining district/county Method Comparison selects loading municipal JSON data sub-nodes. In this way, provincial, county, and level-3 linkages are completed.

The same principle applies to provinces, cities, and counties Based on the serial number.

You will find that the data of provinces, cities, and counties is spliced in JS. <SELECT> </SELECT> you can modify the HTML code according to your desired implementation. for example, if you put an input box and the focus is on the input box, you can load a div layer and put all the data in the layer. This will improve the user experience.

The effect is as follows:

With the recent study, the JS design model can encapsulate many practical functions, such as the encapsulation of tree structure and the entire set of data verification functions, to improve the development efficiency. These functions will be released in the future.

If you are interested in front-end technologies, you can join: 113777786