jquery json universal three-level linkage drop-down list_jquery

Author: shaoyun
Email: shaoyun (at) yeah.net
Date: 2010-03-10 02:03
Blog: http://shaoyun.cnblogs.com/

Use Jquery implementation, the original code only supports IE, I changed it here, there are three versions of the implementation in my code
The first one is built by reading XML, supports IE/firefox, chrome does not support it, if you are interested, you can Change the XML reading part to AJAX, so that chrome support will not be a problem
The second one is built using Json data format, which is my second attempt to improve it
The third one is actually the same as the second one It's the same, but the data is separated into JS files. There is an ASP file in my code, which calls the database to generate Json province and city data. If the page directly calls the ASP file, the speed will be very slow. After generating the JS file It is much faster to call it directly, and this part of the data will generally not change


Update record:

2010-04-19 12:11:24
Added one more The example of a plug-in is not actually a plug-in, it is just a function. Why not write it as a plug-in? It is just based on flexibility considerations.
allows the select to be placed anywhere on the page, instead of being limited to page elements such as div, table, td, etc. The inner
parameters are similar to the following. s1/s2/s3 configures the select id, and v1/v2/v3 is the default value. If you do not want to set it, please set it to null, or do not set it directly. The

parameter configuration is as follows, configure The three IDs and default values ​​of select are enough. If there is no default value, fill in null

Copy code The code is as follows:

var defaults = {
s1:'Select1',
s2:'Select2',
s3:'Select3',
v1:null,
v2:null,
v3:null
};

This is the fourth example. The php file in the directory is the demo generated by the server data and is used as a reference for use

The data format definition is similar to the following:

Copy code The code is as follows:

var threeSelectData= {
"province":{val:"",items:{"city":{val:"",items:{"district and county":""}}}},
"beijing":{ val:"01",items:{
"bj-01":{val:"0101",items:{
"bj-01-01":"010101"
}},
"bj-02":{val:"0102",items:{
"bj-02-01":"010201",
"bj-02-02":"010202"
} }
}},
"shanxi":{val:"02",items:{}},
"guangzhou":{val:"02",items:{}}
} ;

Code example:

Copy code The code is as follows:

The text is not organized in detail! Anyone who knows some JS can understand it!

Code package download