要實現這個頁面的三級聯動，我們需要建立三個php文件，第一個php文件我們導入jQuery文件，里面嵌入JavaScript；第二個php文件我們做一個php的處理頁面，里面引入我們封裝好的數據庫類文件；第三個php文件就是我們所做的封裝數據庫類文件
1.第一個php JavaScript文件
<!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" />
<script src="jquery-1.11.2.min.js"></script>
<title>無標題文檔</title>
</head>
<br />
<h1>全國各地的省，市，區</h1>
<div id="sj"></div>
<body>
<script type="text/javascript">
$(document).ready(function(e) {
//在div里造下拉菜單
$("#sj").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
//填充數據 使用Fill 關鍵字
FillSheng(); //填充省的數據
FillShi(); //填充市的數據
FillQu(); //填充區的數據
//填充省的方法
function FillSheng(){
var code = "0001"; //省的父級代號
$.ajax({
url:"sheng_2_chuli.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
async:false,
success: function(data){
var hang = data.split("|");
var str = "";
for(var i=0;i<hang.length;i++){
var lie = hang[i].split("^");
str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
//把所有<option>放到省的下拉列表里
$("#sheng").html(str);
}
});
}
//填充市的方法
function FillShi(){
var code = $("#sheng").val(); //市的父級代號
$.ajax({
url:"sheng_2_chuli.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
async:false,
success: function(data){
var hang = data.split("|");
var str = "";
for(var i=0;i<hang.length;i++){
var lie = hang[i].split("^");
str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
//把所有<option>放到市的下拉列表里
$("#shi").html(str);
}
});
}
//填充區的方法
function FillQu(){
var code = $("#shi").val(); //區的父級代號
$.ajax({
url:"sheng_2_chuli.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
async:false,
success: function(data){
var hang = data.split("|");
var str = "";
for(var i=0;i<hang.length;i++){
var lie = hang[i].split("^");
str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
//把所有<option>放到區的下拉列表里
$("#qu").html(str);
}
});
}
//當點擊選擇哪個省的時候，市和區一起變
$("#sheng").change(function(){
FillShi();
FillQu();
});
//當點擊選擇哪個市的時侯，區一起變
$("#shi").change(function(){
FillQu();
});
});
</script>
</body>
</html>
2.第二個php 處理文件
<?php
include("DBDA.class.php");
$db = new DBDA();
$pcode = $_POST["code"];
$sql = "select AreaCode,AreaName from chinastates where ParentAreaCode = '{$pcode}'";
echo $db->StrQuery($sql);
?>
3.第三個php 封裝數據庫類文件
<?php
class DBDA
{
public $host="localhost";
public $uid="root";
public $pwd="root";
public $dbname="mydb";
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
{
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
{
return $result;
}
}
}
效果如圖所示：
