Using three-level linkage to do regional selection
Main Page: 1. There must be a link to jquery
2.jquery must be placed at the beginning of the place
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title><Scriptsrc= "Jquery-1.11.2.min.js"></Script><Scriptsrc= "Sanji.js"></Script></Head><Body><DivID= "Sanji">SSSs</Div></Body></HTML>
Level Three JS page:
//JavaScript Document$ (document). Ready (function(e) {//write a div with three drop-down lists$ ("#sanji"). HTML ("<select id= ' sheng ' ></select><select id= ' shi ' ></select><select id= ' qu ' ></select> '); //Populating content //1. Fill the provinceFillsheng (); //filled CityFillshi (); //Fill AreaFillqu (); $("#sheng"). Change (function()//if the province is selected to change, fill in the city and the District { //Change the cityFillshi (); //Change ZoneFillqu (); }) //If the city is selected to change, go to fill the area$ ("#shi"). Change (function(){ //Change ZoneFillqu (); }) //ways to fill the province functionFillsheng () {//Find the parent code varPcode= "0001"; //Calling Ajax$.ajax ({async:false, URL:"Jschuli.php", Data:{pcode:pcode}, type:"POST", DataType:"TEXT", Success:function(data) {varStr= "";//Create a string varHang=data.split ("|");//returns the value of hang for(vari=0;i) { varLie=hang[i].split ("^"); STR+ = "<option value=" "+lie[0]+" > "+lie[1]+" </option> "; } $("#sheng"). html (str); } }); } functionFillshi () {//fetch the value of the city according to the parent code varpcode=$ ("#sheng"). Val (); $.ajax ({async:false, URL:"Jschuli.php", Data:{pcode:pcode}, type:"POST", DataType:"TEXT", Success:function(data) {varStr= "";//Create a string varHang=data.split ("|");//returns the value of hang for(vari=0;i) { varLie=hang[i].split ("^"); STR+ = "<option value=" "+lie[0]+" > "+lie[1]+" </option> "; } $("#shi"). html (str); } }); } functionFillqu () {//var value (defines a value based on the parent code fetch) varpcode=$ ("#shi"). Val (); //Calling Ajax$.ajax ({async:false, URL:"Jschuli.php", Data:{pcode:pcode}, type:"POST", DataType:"TEXT", Success:function(data) {varStr= ""; varHang=data.split ("|") for(vari=0;i) { varLie=hang[i].split ("^"); STR+ = "<option value=" "+lie[0]+" > "+lie[1]+" </option> "; } $("#qu"). html (str); } }) }
Working with page PHP:
<?PHP//take the parent code that's passed in.$pcode=$_post["Pcode"];//Introducing Data Manipulation Classesinclude("./dbda.class.php");$db=NewDbda ();//Write SQL statements$sql="Select Areacode,areaname,parentareacode from chinastates where parentareacode= ' {$pcode}‘";$attr=$db->query ($sql);$str=""; foreach($attr as $v){ $str=$str.implode("^",$v); $str=$str."|"; }$str=substr($str, 0,strlen($str)-1);Echo $str;
Connect to the server
<?PHPclassdbda{ Public $host= "localhost"; Public $uid= "Root"; Public $pwd= "123456"; functionQuery ($sql,$type=0,$db= "MYBD") { $db=NewMysqli ($this->host,$this->uid,$this->pwd,$db); !Mysqli_connect_error() or die("Connection Failed"); $result=$db->query ($sql); if($type==0) { return $result-Fetch_all (); } Else { return $result; } }}
Effect Display:
Three-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
