Home  >  Article  >  php教程  >  jquery+json universal three-level linkage drop-down list

jquery+json universal three-level linkage drop-down list

黄舟
黄舟Original
2016-12-12 16:39:341174browse

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:

 
 
 
 
 
 


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn