Implemented with Jquery. The original code only supports IE. I changed it here. There are three versions of implementation in my code.
The first one is built by reading XML. It supports IE/firefox, but 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 and is my second attempt to improve
The third one is actually the same as the second one, except that 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. It is much faster to call it directly after generating the JS file, and this part of the data will generally not be changed.
Added an additional plug-in example. In fact, it is not a plug-in, it is just a function. Why not write it as a plug-in? It is just based on flexibility considerations.
Allow select to be placed anywhere on the page, instead of being limited to page elements such as div, table, td, etc.
The parameters are similar to the following, s1/s2/s3 configure the select id, v1/v2/v3 is the default value, if you don’t want to set it, please set it to null, or don’t set it directly.
The parameter configuration is as follows. Just configure the three IDs and default values of the select. If there is no default value, fill in null
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 generated Demo of the server data for use. The reference
data format definition is similar to the following:
var threeSelectData={ "省份":{val:"",items:{"城市":{val:"",items:{"区县":""}}}}, "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: