Ajax three-level linkage drop-down menu effect,

Ajax three-level linkage drop-down menu effect,

Ajax write three levels of association, first write a file class, then you can directly call it when using it;

Find a table:

Implementation:

Three levels of linkage in China: province, city, and district;

Figure:

Let's talk about the following ideas:

(1) When the user selects a province, the event is triggered, and the id of the current province is sent to the server program through ajax.

(2) For example, if the China region is used and the China region is 0001, the China region is 0001;

If the code is 11 in Beijing, then the child Number 11 is the city in Beijing,

That is to say, the subcode is queried based on the primary code;

(3) The server queries the database based on client requests and returns the database to the client in a certain format.

The page display is very simple. You only need a div and introduce the js and jquery files:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
I need to select three drop-down boxes and assign the id write Method
First, write three drop-down boxes with IDs and execute three methods:
$ (Document ). ready (function (e) {// three drop-down lists // load the displayed data $ ("# sanji" ).html ("<select id = 'shanghai'> </select> <select id = 'shi'> </select> <select id = 'qu'> </select> "); // loading province FillSheng (); // loading city FillShi (); // loading area FillQu ();}
Next, write the method;
The three menus are linked, that is, they can have different options according to different provinces.
Here, do not use click () to click the event. Use the change event () executed when the status is changed ()
(1) When the province changes:
// When the province changes $ ("# sheng"). change (function () {FillShi (); FillQu ();})
City and district/county changes
(2) When the city changes:
// When the city changes $ ("# shi"). change (function () {FillQu ();})});
The districts and counties have changed;
This logic is okay;
Then, load the province information and write the value to the drop-down menu of the city at the end of ajax traversal:
// Load the province information function FillSheng () {// Based on the parent code // obtain the parent code var pcode = "0001"; // query data based on the parent code $. ajax ({async: false, url: "cl. php ", data: {pcode: pcode}, type:" POST ", dataType:" JSON ", success: function (data) {var str = ""; for (var sj in data) {str = str + "<option value = '" + data [sj]. areaCode + "'>" + data [sj]. areaName + "</optiom>" ;}$ ("# sheng" character .html (str) ;}) ;}// load the municipal function FillShi () {// obtain the parent code var pcode = $ ("# sheng") based on the parent code "). val (); // query data based on the parent code $. ajax ({async: false, // cancel asynchronous url: "cl. php ", data: {pcode: pcode}, type:" POST ", dataType:" JSON ", success: function (data) {var str = ""; for (var sj in data) {str = str + "<option value = '" + data [sj]. areaCode + "'>" + data [sj]. areaName + "</optiom>" ;}$ ("# shi" character .html (str) ;}}) ;}// loading area function FillQu () {// obtain the parent code var pcode = $ ("# shi") based on the parent code "). val (); // query data based on the parent code $. ajax ({url: "cl. php ", data: {pcode: pcode}, type:" POST ", dataType:" JSON ", success: function (data) {var str = ""; for (var sj in data) {str = str + "<option value = '" + data [sj]. areaCode + "'>" + data [sj]. areaName + "</optiom>" ;}$ ("# qu" character .html (str );}});}
Here, the format is JSON, and "TEXT" is used before"
Note:JSON
JSON is a syntax for passing objects. objects can be name/value pairs, arrays, and other objects.
We use arrays, so we need to traverse the array and retrieve each piece of data. What we need to traverse the array in js is
For (var sj in data)
{
}
To traverse the array. Format !!!

Here we will write the file encapsulation class mentioned above and find the class we used to connect to the database:
Add this section:
Public function jsonQuery ($ SQL, $ type = 1) {$ db = new mysqli ($ this-> host, $ this-> zhang, $ this-> mi, $ this-> dbname); $ r = $ db-> query ($ SQL); if ($ type = "1 ") {$ arr = $ r-> fetch_all (MYSQLI_ASSOC); return json_encode ($ arr); // remove the last vertical line} else {return $ r ;}}}
Well, that's right.
Processing page:
Finally, the processing page is as follows:
<?php$pcode = $_POST["pcode"];include ("db.class.php");$db = new db();$sql = "select * from chinastates where ParentAreaCode = '{$pcode}'";echo $db->jsonQuery($sql);
Connect to the database and call the object class. After you finish writing the SQL statement, you can directly return the results !!!
It's so short!
:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.