Ajax三級聯動
阿新 • • 發佈：2018-01-29
spl mys ces function code ++ sel nta arr
全國省市縣查詢
html代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script src="../jquery-1.11.2.min.js"></script>
<script src="sanji.js"></script>
</head>
<body>
<h1>區域查詢</h1>
<div id="sanji"></div>
</body>
</html>
js代碼實現各區市隨省的變化而變化
$(document).ready(function(e) {
$("#sanji").html("<select id=‘sheng‘></select><select id=‘shi‘></select><select id=‘qu‘></select>");//將三個下拉的字符串交給前邊的div
tiansheng();//加載省的數據
tianshi();//加載市的數據
tianqu();//加載區 的數據
$("#sheng").change(function(){//變化後執行
tianshi();//重新加載市
tianqu();//重新加載區
})
$("#shi").change(function(){//變化後執行
tianqu();//加載區的數據
})
});
function tiansheng(){
var pcode = "0001"; //找出省的父級代號
$.ajax({
async:false,//同步加載
url:"states.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
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>";
}
$("#sheng").html(str);
}
});
}
function tianshi(){
var pcode = $("#sheng").val();//找市的父級代號，省選中項的值
$.ajax({
async:false,//同步加載
url:"states.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
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>";
}
$("#shi").html(str);
}
});
}
function tianqu(){
var pcode = $("#shi").val();//找區的父級代號，市選中項的值
$.ajax({
url:"states.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
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>";
}
$("#qu").html(str);
}
});
}
處理頁面
<?php
$pcode = $_POST["pcode"];
require "DBDA.class.php";
$db = new DBDA();
$sql = "select * from chinastates where parentareacode=‘{$pcode}‘";
echo $db->strquery($sql);
DBDA封裝功能
<?php
class DBDA{
public $host="localhost"; //服務器地址
public $uid="root"; //用戶名
public $pwd="123"; //密碼
public $dbname="crud"; //數據庫名稱
public function query($sql,$type=0){
$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
$result = $db->query($sql);
if($type){
return $result;
}else{
return $result->fetch_all();
}
}
public function strquery($sql,$type=0){
$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
$result = $db->query($sql);
if($type){
return $result;
}else{
$arr = $result->fetch_all();
$str ="";
foreach($arr as $v){
$str .= implode("^",$v)."|";
}
$str = substr($str,0,strlen($str)-1);
return $str;
}
}
}
Ajax三級聯動