Just beginning to contact PHP, in fact, some of the more in-depth things are not very understanding, like this is the provinces and cities linkage, are using three tables for the basis of the code, forgive my ignorance, thank you.
The next step is the coding section:
<?PHPrequire('./smarty/smarty.class.php ');d Ate_default_timezone_set ("PRC");$conn=mysql_connect("localhost", "root", "123456");mysql_select_db("Dbcity");mysql_query("Set Names UTF8");$sql= "Select Pid,pname from Province";$result=mysql_query($sql,$conn); while($rs=Mysql_fetch_assoc($result)){ $list[] =Array("pid" =$rs["pid"], "pname" =$rs["PName"]);}$sql 2= "Select Cid,cname from the city where pid={$list[0] [' PID ']} ";$result 2=mysql_query($sql 2,$conn); while($rs 2=Mysql_fetch_assoc($result 2)){ $list 2[] =Array("CNAME" =$rs 2["CNAME"], "cid" =$rs 2["CID"]);} $sql 3= "Select Xname,xid from Xian where cid={$list 2[0] [' CID ']} ";$result 3=mysql_query($sql 3,$conn); while($rs 3=Mysql_fetch_assoc($result 3)){ $list 3[] =Array("XName" =$rs 3["XName"]);}$smarty=NewSmarty ();$smarty->left_delimiter= ' <{';//left boundary character$smarty->right_delimiter= '}> ';//Right Boundary character$smarty->assign ("Content",$list);$smarty->assign ("Name",$list 2);$smarty->assign ("Xian",$list 3);$smarty->display ("show.html");?>
The above is to get all the first load out of the database, mainly using the Smarty, array. There is nothing else to delve into, you can see the last word of the code above is to jump to the Smarty template page show.html
Let's take a look at the writing code of the template page:
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title> Provincial Cascade </title>6<script type= "Text/javascript" src= "Js/jquery-1.4.2.min.js" ></script>7<script type= "Text/javascript" >8$(function(){9$ ("#province"). Change (function() { Ten varProvince = $ ("#province").Val (); One alert (province); A$.Ajax ({ -URL: ' display.php ', -Type: ' GET ', theData: {' category ': ' City ', city:province}, -DataType: ' JSON ', -Successfunction(data) { - varContent = ' '; + for(vari in data) { -Content + = ' <option value= ' +data[i].cid+ ' > ' +data[i].cname+ ' </option> '; + } A$ (' #city ').HTML (content); at } -});//' abc. ' $age ". def" - }); -$ ("#city"). Change (function(){ - varCity = $ ("#city").Val (); - alert (city); in$.Ajax ({ -URL: ' assign.php ', toType: ' GET ', +data:{' category ': ' Xian ', xian:city}, -DataType: ' JSON ', theSuccessfunction(data) { * varContent = ' '; $ for(vari in data) {Panax NotoginsengContent + = ' <option> ' +data[i].xname+ ' </option> '; - } the$ (' #xian ').HTML (content); + } A }) the }) + }) -</script> $ $<body> -Select province: <select name= "province" id= "province" style= "width:100px;" onclick= "click" > -<{foreachFrom=$content Key=k item=value}> the<option value= "<{$value.pid}> "><{$value.pname}></option> -<{/foreach}>Wuyi</select> <br/> theSelect the city: <select name= "Cities" id= "urban" style= "width:100px;" > - Wu<{foreachFrom=$nameItem=value2}> -<option value= "<{$value 2.cid}> "><{$value 2.cname}></option> About<{/foreach}> $</select><br/> -Select County seat: <select name= "Xian" id= "Xian" style= "width:100px;" > - -<{foreachFrom=$xianItem=value3}> A<option><{$value 3.xname}></option> +<{/foreach}> the</select><br/> -</body> $The name here is not a specification, hope not to mislead everyone, everyone in their own code when the time to pay attention to their own coding specifications. First, we can see the select label for "Choose a province", where we iterate through the array of index.php pages using foreach to iterate through the province's ID, province name. Here, the ID of the province is necessary because it involves the change event of the next select, so be sure to pay attention to this place. Next is the asynchronous submission of the Ajax event, we are based on the ID of the select is called Province to do his change event, here Ajax people will be their own Ajax learning, in fact, In PHP, the Smarty template engine is used to separate the background code from the foreground display code, but for everyone to be able to see carefully, the JavaScript code is placed on the page, preferably in the project to write a JavaScript script and then import, In favor of the cleanliness of the page, we first look at the province's Ajax code, and we have it in its URL property to go to the display.php page,
So, next is the code for the display page.
1<?PHP2Date_default_timezone_set ("PRC");3 $conn=mysql_connect("localhost", "root", "123456");4 mysql_select_db("Dbcity");5 mysql_query("Set Names UTF8");6 if($_get[' Category ']){ 7 if($_get["category"]! = "") {8 //according to the province to get the city9 $sql= "Select Cid,cname from city where pid=".$_get[' City '];Ten $result=mysql_query($sql,$conn); One if(mysql_num_rows($result) > 0) { A while($row=Mysql_fetch_assoc($result)) { - $str[] =Array("cid" =$row["CID"], "CNAME" = ($row["CNAME"])); - } the //Var_dump ($STR); - Echo(Json_encode ($str)); - } - Mysql_free_result($result); + } - } + A at?>Here, we use the Get method to get the parameters of the previous Ajax pass, to get the ID of the click Province, according to this ID to get the city below the province. Of course, the following areas of the city are obvious to us, but it is important to note that the value of the city's select tag is obtained in order to query the area it governs.
The assign.php code is as follows
1<?PHP2Date_default_timezone_set ("PRC");3 $conn=mysql_connect("localhost", "root", "123456");4 mysql_select_db("Dbcity");5 mysql_query("Set Names UTF8");6 if($_get[' Category ']){7 if($_get["category"]! = "") {8 //according to the province to get the city9 $sql= "Select Xid,xname from Xian where cid=".$_get[' Xian '];Ten $result=mysql_query($sql,$conn); One if(mysql_num_rows($result) > 0) { A while($row=Mysql_fetch_assoc($result)) { - $str[] =Array("id" =$row["XID"], "xname" = ($row["XName"])); - } the //Var_dump ($STR); - Echo(Json_encode ($str)); - } - Mysql_free_result($result); + } - } +?>Hope my tips can help you, thank you!
On the realization of three-level linkage of provincial urban area in Smarty
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
