Home php教程 PHP开发 jquery+json universal three-level linkage drop-down list

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

Dec 12, 2016 pm 04:39 PM

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 
};
Copy after login

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:{}} 
};
Copy after login

Code example:

 
 
 
 
 
 
Copy after login


Statement of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1664
14
PHP Tutorial
1268
29
C# Tutorial
1242
24