要求：寫一個省市區（或者年月日）的三級聯動，實現地區或時間的下拉選擇。
實現技術：php ajax
實現：省級下拉變化時市下拉區下拉跟着變化，市級下拉變化時區下拉跟着變化。
使用chinastates表查詢
Ajax加載數據
1.這是chinastates表
2.做一個簡單html：ssq.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <script src="dist/js/jquery-1.11.2.min.js" ></script> <script src="ssq.js"></script> </head> <body> <div id="ssq"></div> </body> </html>
3.根據html做jquery：ssq.js
// JavaScript Document //當頁面內容都加載完才執行 $(document).ready(function(e) { //加載三個下拉列表 $("#ssq").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); //加載顯示數據 //1.加載省份 FillSheng(); //2.加載市 FillShi(); //3.加載區 FillQu(); //當省份選中變化，重新加載市和區 $("#sheng").change(function(){ //當元素的值發生改變時，會發生 change 事件,該事件僅適用於文本域（text field），以及 textarea 和 select 元素。 //加載市 FillShi(); //加載區 FillQu(); }) //當市選中變化，重新加載區 $("#shi").change(function(){ //加載區 FillQu(); }) }); //加載省份信息 function FillSheng() { //取父級代號 var pcode ="0001"; //根據父級代號查數據 $.ajax({ //取消異步，也就是必須完成上面才能走下面 async:false, url:"load.php", data:{pcode:pcode}, type:"POST", dataType:"JSON", success: function(data){ var str=""; //遍歷數組，把它放入sj for(var sj in data){ //<option value="11">北京</option> str=str+"<option value='"+data[sj].AreaCode+"'>"+data[sj].AreaName +"</option>"; } $("#sheng").html(str); } }); } //加載市信息 function FillShi() { //取父級代號 var pcode =$("#sheng").val(); //根據父級代號查數據 $.ajax({ //取消異步，也就是必須完成上面才能走下面 async:false, url:"load.php", data:{pcode:pcode}, type:"POST", dataType:"JSON", success: function(data){ var str=""; //遍歷數組，把它放入sj for(var sj in data){ //<option value="11">北京</option> str=str+"<option value='"+data[sj].AreaCode+"'>"+data[sj].AreaName +"</option>"; } $("#shi").html(str); } }); } //加載區信息 function FillQu() { //取父級代號 var pcode =$("#shi").val(); //根據父級代號查數據 $.ajax({ //不需要取消異步 url:"load.php", data:{pcode:pcode}, type:"POST", dataType:"JSON", success: function(data){ var str=""; //遍歷數組，把它放入sj for(var sj in data){ //<option value="11">北京</option> str=str+"<option value='"+data[sj].AreaCode+"'>"+data[sj].AreaName +"</option>"; } $("#qu").html(str); } }); }
4.再把數據庫連接起來 :load.php,把DBDA重新加載一個方法：JsonQuery
<?php $pcode=$_POST["pcode"]; include("../fengzhuang/DBDA.class.php"); $db=new DBDA(); $sql="select * from chinastates where ParentAreaCode='{$pcode}'"; echo $str=$db->JsonQuery($sql);
<?php class DBDA { //設定登錄默認值 public $host = "localhost"; public $uid = "root"; public $pwd = "root"; public $dbname = "mydb"; //設定$type = 1為查詢語句，$type =0為增刪改語句 public function Query($sql,$type=1) { $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname); $result = $db->query($sql); if($type=="1") { //返回查詢結果 return $result->fetch_all(); }else { //返回ture或false return $result; } } //返回字符串 public function StrQuery($sql,$type=1) { $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname); $result = $db->query($sql); if($type=="1") { $arr = $result->fetch_all(); $str =""; foreach($arr as $v) { $str = $str.implode("^",$v)."|"; } return substr($str,0,strlen($str)-1); }else { //返回ture或false return $result; } } //返回JSON public function JsonQuery($sql,$type=1) { $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname); $result = $db->query($sql); if($type=="1") { $arr = $result->fetch_all(MYSQLI_ASSOC); return json_encode($arr); }else { //返回ture或false return $result; } } }
做出來的效果如圖所示：
然后我們找山東省淄博市張店區：
