利用JQ與AJAX實現三級聯動實現的效果：
當前兩級改變時，后邊一級或兩級都會改變：
使用的數據庫：
html代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<select id="yiji" >
</select>
<select id="erji" >
</select>
<select id="sanji" >
</select>
</body>
</html>
簡而言之，做三個空的下拉列表，引入jq包。
邏輯上封裝三個函數，分別是加載第一級，第二級和第三極的下拉列表，然后當第一級改變時，第二級改變；第二級改變時，第三極改變：
$(document).ready(function(e) {
yiji(); //第一級函數
erji(); //第二級函數
sanji(); //第三極函數
$("#yiji").change(function(){
erji();
sanji();
})
$("#erji").change(function(){
sanji();
})
});
然后是三個函數的封裝方法：
function yiji(){
$.ajax({
async:false,
url:"yiji.php",
dataType:"TEXT",
success:function(r){
var lie = r.split("|");
var str = "";
for(var i=0;i<lie.length;i++)
{
str +=" <option value='"+lie[i]+"' >"+lie[i]+"</option> ";
}
$("#yiji").html(str);
}
});
}
//二級
function erji(){
var val = $("#yiji").val();
$.ajax({
async:false,
url:"erji.php",
dataType:"TEXT",
data:{e:val},
type:"POST",
success:function(r){
var lie = r.split("|");
var str = "";
for(var i=0;i<lie.length;i++)
{
str +=" <option value='"+lie[i]+"'>"+lie[i]+"</option> ";
}
$("#erji").html(str);
}
});
}
//三級
function sanji(){
var val = $("#erji").val();
if(val!=="") //有些特別行政區沒有下一區縣，例如香港
{
$.ajax({
url:"sanji.php",
dataType:"TEXT",
data:{e:val},
type:"POST",
success:function(r){
var lie = r.split("|");
var str = "";
for(var i=0;i<lie.length;i++)
{
str +=" <option value='"+lie[i]+"'>"+lie[i]+"</option> ";
}
$("#sanji").html(str);
}
});
}
else{
$("#sanji").empty();
}
}
通過三個函數的處理界面，通過數據庫訪問將數據串接為字符串回轉。
首先引入類文件：
DBDAA.class.php：
<?php
class DBDA {
public $host = "localhost";
public $uid = "root";
public $pwd = "";
public $dbname = "12345";
//成員方法
public function Query($sql, $type = 1) {
$db = new MySQLi($this -> host, $this -> uid, $this -> pwd, $this -> dbname);
$r = $db -> query($sql);
if ($type == 1) {
return $r -> fetch_all();
} else {
return $r;
}
}
//返回字符串的方法
public function StrQuery($sql, $type = 1) {
$db = new MySQLi($this -> host, $this -> uid, $this -> pwd, $this -> dbname);
$r = $db -> query($sql);
if ($type == 1) {
$attr = $r -> fetch_all();
$str = "";
foreach ($attr as $v) {
$str .= implode("^", $v) . "|";
}
return substr($str, 0, strlen($str) - 1);
} else {
return $r;
}
}
}
一級處理文件，yiji.php：
<?php
include("DBDAA.class.php");
$db = new DBDA();
$sql = " select areaname from chinastates where areacode REGEXP '^[[:digit:]]{2}$' ";
echo $db->StrQuery($sql);
?>
二級處理文件，erji.php：
<?php
include("DBDAA.class.php");
$db = new DBDA();
$e = $_POST["e"];
$sqll = " select areacode from chinastates where areaname = '{$e}'";
$atter = $db->Query($sqll);
$sql = " select areaname from chinastates where areacode REGEXP '^{$atter[0][0]}[[:digit:]]{2}$' ";
echo $db->StrQuery($sql);
?>
三級處理文件，sanji.php：
<?php
include("DBDAA.class.php");
$db = new DBDA();
$e = $_POST["e"];
$sqll = " select areacode from chinastates where areaname = '{$e}'";
$atter = $db->Query($sqll);
$sql = " select areaname from chinastates where areacode REGEXP '^{$atter[0][0]}[[:digit:]]{2}$' ";
echo $db->StrQuery($sql);
?>