Home > Developer > Web Develop
Using JQ and Ajax to achieve the effect of three-level linkage:
At the current level two change, the back or level two will change:
Database to use:
HTML code:
<!doctype html>
In short, make three empty drop-down lists and introduce the JQ package.
Logically encapsulates three functions, which are the drop-down lists that load the first, second, and third Poles, and then change the second level when the first level changes; When the second level changes, the third pole changes:
$ (document). Ready (function (e) {Yiji (); The first level function Erji (); Second-level function Sanji (); The third-pole function $ ("#yiji"). Change (function () {Erji ();
Sanji ();}) $ ("#erji"). Change (function () {Sanji ();})});
Then there is the encapsulation method of three functions:
function Yiji () {$.ajax ({async:false,url: "yiji.php", DataType: "TEXT", Success:function (R) {var lie = r.split ("|"); var str = ""; for (var i=0;i<lie.length;i++) {str + = "<option value= '" +lie[i]+ ">" +lie[i]+ "</option>";} $ ("#yiji"). html (str);}}); Level two function Erji () {var val = $ ("#yiji"). Val (); $.ajax ({async:false,url: "erji.php", DataType: "TEXT", Data:{e:val}, Type: "POST", Success:function (R) {var lie = r.split ("|"); var str = ""; for (var i=0;i<lie.length;i++) {str + = "<option value= '" +lie[i]+ ">" +lie[i]+ "</option>";} $ ("#erji"). html (str);}}); Level three function Sanji () {var val = $ ("#erji"). Val (); if (val!== "")//some special Administrative region does not have a county, such as Hong Kong {$.ajax ({url: "sanji.php ", DataType:" TEXT ", Data:{e:val},type:" POST ", Success:function (R) {var lie = r.split (" | "); var str = ""; for (var i=0;i<lie.length;i++) {str + = "<option value= '" +lie[i]+ ">" +lie[i]+ "</option>";} $ ("#sanji"). html (str);}}); else{$ ("#sanji"). empty ();}}
The data is threaded to string rotation through database access through the processing interface of three functions.
First introduce the class file:
DBDAA.class.php:
<?phpclass Dbda {public $host = "localhost";p ublic $uid = "root";p ublic $pwd = "";p ublic $dbname = "12345";//Member Method public function Query ($sql, $type = 1) {$db = new mysqli ($this, Host, $this, UID, $this, pwd, $this-dbname) ; $r = Query ($sql) $db, if ($type = = 1) {return $r-Fetch_all ();} else {return $r;}} Method of returning a string public function strquery ($sql, $type = 1) {$db = new mysqli ($this, Host, $this, UID, $this, PWD, $this, dbname); $r = $db, query ($sql), if ($type = = 1) {$attr = $r, Fetch_all (); $str = ""; foreach ($attr as $ V) {$str. = Implode ("^", $v). "|";} Return substr ($str, 0, strlen ($str)-1);} else {return $r;}}}
First level processing file, yiji.php:
<?phpinclude ("DBDAA.class.php"); $db = new Dbda (); $sql = "Select AreaName from Chinastates where AreaCode regexp ' ^[[:d igit:]]{2}$ ' ", Echo $db->strquery ($sql);? >
Level two processing file, erji.php:
<?phpinclude ("DBDAA.class.php"); $db = new Dbda (); $e = $_post["E"]; $SQLL = "Select AreaCode from Chinastates where area Name = ' {$e} ', $atter = $db->query ($SQLL); $sql = "Select AreaName from Chinastates where AreaCode REGEXP ' ^{$a tter[0][0]}[[:d igit:]]{2}$ ' "; Echo $db->strquery ($sql);? >
Level three processing file, sanji.php:
<?phpinclude ("DBDAA.class.php"); $db = new Dbda (); $e = $_post["E"]; $SQLL = "Select AreaCode from Chinastates where area Name = ' {$e} ', $atter = $db->query ($SQLL); $sql = "Select AreaName from Chinastates where AreaCode REGEXP ' ^{$a tter[0][0]}[[:d igit:]]{2}$ ' "; Echo $db->strquery ($sql);? >
Jq+ajax realization of multi-level linkage
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
