Use PHP + MySql + Ajax + jQuery to implement three-level linkage function examples in provinces, cities, and cities,
Use PHP + MySql + Ajax + jQuery to implement provincial/municipal level-3 linkage Function
Requirement: Write a three-level linkage between province, city (or year, month, and day) to select a region or time drop-down.
Implementation Technology: php ajax
Implementation: When the provincial drop-down changes, the Municipal drop-down changes, and the time zone drop-down changes.
Query using the chinastates table
Load data using Ajax
1. This is the chinastates table.
2. Make a simple php: Ajax_eg.php
<!DOCTYPE html>3. Create jquery: Ajax_ssq.js based on the previous page.
// JavaScript Document // execute $ (document) after the page content is loaded ). ready (function (e) {// load three drop-down lists $ ("# sanji" ).html ("<select id = 'sheng'> </select> <select id = 'shi'> </select> <select id = 'qu'> </select> "); // load the display data // 1. load the province LoadSheng (); // 2. load the LoadShi (); // 3. loadQu (); // when the province is selected and changed, reload the city and district $ ("# sheng "). change (function () {// when the element value changes, a change event occurs. This event is only applicable to text fields and textarea and select elements. // Load the LoadShi (); // load the LoadQu ();}) // when the selected city changes, reload the zone $ ("# shi "). change (function () {// LoadQu () ;}); // load the province information function LoadSheng () {// obtain the parent code var pcode = "0001"; // query data based on the parent code $. ajax ({// cancel Asynchronization, that is, the above must be completed before the following async: false, url: "load. php ", data: {pcode: pcode}, type:" POST ", dataType:" JSON ", success: function (data) {var str = ""; // traverse the array and put it into sj for (var k in data) {str = str + "<option value = '" + data [k]. [0] + "'>" + data [k]. [1] + "</option>" ;}$ ("# sheng" character .html (str) ;}}) ;}// load the city information function LoadShi () {// obtain the parent code var pcode = $ ("# sheng "). val (); // query data based on the parent code $. ajax ({// cancel Asynchronization, that is, the above must be completed before the following async: false, url: "load. php ", data: {pcode: pcode}, type:" POST ", dataType:" JSON ", success: function (data) {var str = ""; // traverse the array and put it into sj for (var k in data) {str = str + "<option value = '" + data [k]. [0] + "'>" + data [k]. [0] + "</option>" ;}$ ("# shi" character .html (str) ;}}) ;}// loading area information function LoadQu () {// obtain the parent code var pcode = $ ("# shi "). val (); // query data based on the parent code $. ajax ({// do not need to cancel asynchronous url: "load. php ", data: {pcode: pcode}, type:" POST ", dataType:" JSON ", success: function (data) {var str = ""; // traverse the array and put it into sj for (var k in data) {str = str + "<option value = '" + data [k]. [0] + "'>" + data [k]. [1] + "</option>" ;}$ ("# qu" character .html (str );}});}4. Connect the database again: load. php, and reload the DBDA method: JsonQuery
<?php$pcode = $_POST["pcode"];require_once "./DBDA.class.php";$db = new DBDA();$sql = "select * from chinastates where parentareacode='{$pcode}'";echo $db->JsonQuery($sql,0);Encapsulation class
<? Php class DBDA {public $ host = "localhost"; public $ uid = "root"; public $ pwd = ""; public $ dbname = "0710_info";/* query method: run the SQL statement given by the user and return the corresponding result $ SQL: the SQL statement you want to execute $ type: the type of the SQL statement you want to execute return: returns true or false if it is an added or deleted statement, and returns a two-dimensional array */public function query ($ SQL, $ type = 1) if it is a query statement) {// by default, true indicates adding, deleting, and modifying $ db = new MySQLi ($ this-> host, $ this-> uid, $ this-> pwd, $ this-> dbname ); if (mysqli_connect_error () {return "connection failed! ";}$ Result = $ db-> query ($ SQL); if ($ type = 1) {return $ result; // return true or false if you add, delete, and modify statements.} else {return $ result-> fetch_all (); // query statement returns a two-dimensional array} // This method is used in ajax to splice the Retrieved Data (two-dimensional array) into a string for Processing public function StrQuery ($ SQL, $ type = 1) {$ db = new MySQLi ($ this-> host, $ this-> uid, $ this-> pwd, $ this-> dbname ); if (mysqli_connect_error () {return "connection failed! ";}$ Result = $ db-> query ($ SQL); if ($ type = 1) {return $ result; // The add, delete, modify, and delete statements return true or false} else {$ arr = $ result-> fetch_all (); // the query statement returns a two-dimensional array $ str = ""; foreach ($ arr as $ v) {$ str = $ str. implode ("^", $ v ). "|" ;}$ str = substr ($ str, 0, strlen ($ str)-1); return $ str ;}} // this method is used in ajax to return the json data type using the public function JsonQuery ($ SQL, $ type = 1) {$ db = new MySQLi ($ this-> host, $ this-> uid, $ this-> pwd, $ this-> dbname); if (mysqli _ Connect_error () {return "connection failed! ";}$ Result = $ db-> query ($ SQL); if ($ type = 1) {return $ result; // The add, delete, modify, and delete statements return true or false} else {$ arr = $ result-> fetch_all (); // the query statement returns the two-dimensional (correlated) array return json_encode ($ arr ); // convert the array to json }}}Effect:
The above example of using PHP + MySql + Ajax + jQuery to implement the three-level linkage function between provinces, municipalities, and cities is a small part of the Content shared with you. I hope you can provide a reference and support for more customers.
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
