使用PHP+MySql+Ajax+jQuery實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)功能
要求：寫一個(gè)省市區(qū)（或者年月日）的三級(jí)聯(lián)動(dòng)，實(shí)現(xiàn)地區(qū)或時(shí)間的下拉選擇。
實(shí)現(xiàn)技術(shù)：php ajax
實(shí)現(xiàn)：省級(jí)下拉變化時(shí)市下拉區(qū)下拉跟著變化，市級(jí)下拉變化時(shí)區(qū)下拉跟著變化。
使用chinastates表查詢
Ajax加載數(shù)據(jù)
1.這是chinastates表
2.做一個(gè)簡(jiǎn)單php：Ajax_eg.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="bootstrap/js/jquery-1.11.2.min.js"></script>
</head>
<style>
.sanji{
margin-left: 550px;
margin-top: 150px;
}
</style>
<body>
<div class="sanji"> </div>
</body>
</html>
3.根據(jù)前一個(gè)頁面做jquery：Ajax_ssq.js
// JavaScript Document
//當(dāng)頁面內(nèi)容都加載完才執(zhí)行
$(document).ready(function(e) {
//加載三個(gè)下拉列表
$("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
//加載顯示數(shù)據(jù)
//1.加載省份
LoadSheng();
//2.加載市
LoadShi();
//3.加載區(qū)
LoadQu();
//當(dāng)省份選中變化，重新加載市和區(qū)
$("#sheng").change(function(){ //當(dāng)元素的值發(fā)生改變時(shí)，會(huì)發(fā)生 change 事件,該事件僅適用于文本域（text field），以及 textarea 和 select 元素。
//加載市
LoadShi();
//加載區(qū)
LoadQu();
})
//當(dāng)市選中變化，重新加載區(qū)
$("#shi").change(function(){
//加載區(qū)
LoadQu();
})
});
//加載省份信息
function LoadSheng()
{
//取父級(jí)代號(hào)
var pcode ="0001";
//根據(jù)父級(jí)代號(hào)查數(shù)據(jù)
$.ajax({
//取消異步，也就是必須完成上面才能走下面
async:false,
url:"load.php",
data:{pcode:pcode},
type:"POST",
dataType:"JSON",
success: function(data){
var str="";
//遍歷數(shù)組，把它放入sj
for(var k in data){
str=str+"<option value='"+data[k].[0]+"'>"+data[k].[1]+"</option>";
}
$("#sheng").html(str);
}
});
}
//加載市信息
function LoadShi()
{
//取父級(jí)代號(hào)
var pcode =$("#sheng").val();
//根據(jù)父級(jí)代號(hào)查數(shù)據(jù)
$.ajax({
//取消異步，也就是必須完成上面才能走下面
async:false,
url:"load.php",
data:{pcode:pcode},
type:"POST",
dataType:"JSON",
success: function(data){
var str="";
//遍歷數(shù)組，把它放入sj
for(var k in data){
str=str+"<option value='"+data[k].[0]+"'>"+data[k].[0]+"</option>";
}
$("#shi").html(str);
}
});
}
//加載區(qū)信息
function LoadQu()
{
//取父級(jí)代號(hào)
var pcode =$("#shi").val();
//根據(jù)父級(jí)代號(hào)查數(shù)據(jù)
$.ajax({
//不需要取消異步
url:"load.php",
data:{pcode:pcode},
type:"POST",
dataType:"JSON",
success: function(data){
var str="";
//遍歷數(shù)組，把它放入sj
for(var k in data){
str=str+"<option value='"+data[k].[0]+"'>"+data[k].[1]+"</option>";
}
$("#qu").html(str);
}
});
}
4.再把數(shù)據(jù)庫(kù)連接起來 :load.php,把DBDA重新加載一個(gè)方法：JsonQuery
<?php
$pcode = $_POST["pcode"];
require_once "./DBDA.class.php";
$db = new DBDA();
$sql = "select * from chinastates where parentareacode='{$pcode}'";
echo $db->JsonQuery($sql,0);
封裝類
<?php
class DBDA{
public $host="localhost";
public $uid="root";
public $pwd="";
public $dbname="0710_info";
/*
query方法:執(zhí)行用戶給的sql語句,并返回相應(yīng)的結(jié)果
$sql:用戶需要執(zhí)行的sql語句
$type:用戶需要執(zhí)行的sql語句的類型
return:如果是增刪語句改返回true或false,如果是查詢語句返回二維數(shù)組
*/
public function query($sql,$type=1){//默認(rèn)true為增刪改
$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
if(mysqli_connect_error()){
return "連接失敗!";
}
$result = $db->query($sql);
if($type==1){
return $result;//增刪改語句返回true或false
}else{
return $result->fetch_all();//查詢語句返回二維數(shù)組
}
}
//此方法用于ajax中用于對(duì)取出的數(shù)據(jù)（二維數(shù)組）進(jìn)行拼接字符串處理
public function StrQuery($sql,$type=1){
$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
if(mysqli_connect_error()){
return "連接失敗!";
}
$result = $db->query($sql);
if($type==1){
return $result;//增刪改語句返回true或false
}else{
$arr = $result->fetch_all();//查詢語句返回二維數(shù)組
$str = "";
foreach($arr as $v){
$str = $str.implode("^", $v)."|";
}
$str = substr($str, 0,strlen($str)-1);
return $str;
}
}
//此方法用于ajax中用于返回為json數(shù)據(jù)類型時(shí)使用
public function JsonQuery($sql,$type=1){
$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
if(mysqli_connect_error()){
return "連接失敗!";
}
$result = $db->query($sql);
if($type==1){
return $result;//增刪改語句返回true或false
}else{
$arr = $result->fetch_all();//查詢語句返回二維(關(guān)聯(lián))數(shù)組
return json_encode($arr);//將數(shù)組轉(zhuǎn)換成json
}
}
}
實(shí)現(xiàn)效果：
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測(cè)試外，其他素材未做測(cè)試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。