How to write the three-level linkage of provincial city with Jquery+ajax? (Two ways of encapsulation and non-encapsulation)-----2017-05-14

First, to achieve such effects,

1, to clarify the idea:

Make three drop-down menus first----get the contents of the second drop-down list based on the value of the first drop-down menu, and the third one.

2. Database tables used: Chinastates table

Law: According to the National (China) AreaCode query provincial (such as: Beijing); According to the areacode of the provincial level (such as: Beijing jurisdiction); Query district level (e.g. Dongcheng district) according to the AreaCode of the city level

The first way: The package is not used, the data reading is slow, you can look at the principle, so that in the second way package is much easier.

The code is as follows:

<! DOCTYPE html>
Problems during the period: the first data for each drop-down list is not output: Because the value of the first data in each drop-down list has a space!!! So in the output data to go to space!!!
The value returned by data may have a space line wrapping, etc., so use the trim () method to go to the space!!!
The second way : Encapsulated as plug-in, can be called at any time later (important)
(1) Main Page:
<! DOCTYPE html>Introduced jquery package <script src= ". /jquery-1.11.2.min.js "></script>
Refer to our own encapsulated JS file <script src= "Sanji.js" ></script>ID to be consistent with the encapsulated JS plugin <div id= "Sanji" ></div></body>
(2) Our own package of JS plugin
$ (document). Ready (function (e) {//Throw three drop-down lists into the main page of the Div built by $ ("#sanji"). HTML ("<select id= ' Sheng ' ></select>< Select Id= ' shi ' ></select><select id= ' qu ' ></select> ');//Load Province data Loadsheng ();//Load City Data Loadshi () ;//Load Area data loadqu ();//Add click events to the drop-down list for the province, and when the province changes, the corresponding city and region will change $ ("#sheng"). Click (function () {Loadshi (); Loadqu ();}) Add a click event to the city's drop-down list, and when the city changes, the corresponding area changes $ ("#shi"). Click (function () {loadqu ();})}); /Load Province drop-down list function Loadsheng () {var pcode = "0001"; $.ajax ({async:false,url: "chuli.php", data: {code:pcode},type: "POST" , DataType: "TEXT", success:function (data) {var hang = Data.trim (). Split ("|"); var str = ""; for (var i = 0; i < hang.length; i++) {var lie = hang[i].split ("^"); str = str + "<option value= '" + lie[0] + ">" + lie[1] + "</option>";} $ ("#sheng"). html (str);}}); Load City Province drop-down list function Loadshi () {var pcode = $ ("#sheng"). Val (); $.ajax ({async:false,url: "chuli.php", data: {Code:pcode}, Type: "POST", DataType: "TEXT", success:function (data) {var hang = Data.trim (). Split ("|"); Varstr = ""; for (var i = 0; i < hang.length; i++) {var lie = hang[i].split ("^"); str = str + "<option value = '" + lie[0] + ">" + lie[1] + "</option>";} $ ("#shi"). html (str);}}); Load the province's drop-down list function loadqu () {var pcode = $ ("#shi"). Val (); $.ajax ({url: "chuli.php", data: {code:pcode},type: "POST", data Type: "TEXT", success:function (data) {var hang = Data.trim (). Split ("|"); var str = ""; for (var i = 0; i < hang.length; i++) {var lie = hang[i].split ("^"); str = str + "<option value = '" + lie[0] + ">" + lie[1] + "</option>";} $ ("#qu"). html (str);}});
　　
Next is the processing page (two methods are used): chuli.php
<?php$code=$_post["code"];require "DB.class.php"; $db =new DB (); $sql = "Select Areacode,areaname from Chinastates Where parentareacode= ' {$code} ' "; $str = $db->strquery ($sql); Echo $str;
Finally, the encapsulated class file: DB.class.php
function Strquery ($sql) {$db = new mysqli ($this->host, $this->uid, $this->pwd, $this->dbname); $result = $db- >query ($sql); $arr = $result->fetch_all (); $str = ""; foreach ($arr as $v) {$str = $str. Implode ("^", $v). "|";} $STR = substr ($str, 0,strlen ($STR)-1); return $str;}}? >
　　
How to write the three-level linkage of provincial city with Jquery+ajax? (Two ways of encapsulation and non-encapsulation)-----2017-05-14