本文實(shí)例為大家分享了ajax三級聯(lián)動展示的具體代碼,供大家參考,具體內(nèi)容如下

1. test.php
script src="../jquery-1.11.2.min.js">/script>
script src="sanji.js">/script>
title>無標(biāo)題文檔/title>
/head>
body>
h1>三級聯(lián)動/h1>
div id="sanji">/div>
/body>
/html>
2. sanji.js
// JavaScript Document
$(document).ready(function(e) {
//找到ID=SANJI的DIV,造三個(gè)下拉扔進(jìn)去
$("#sanji").html("select id='sheng'>/select>select id='shi'>/select>select id='qu'>/select>");
//加載省的數(shù)據(jù)
LoadSheng();
//加載市的數(shù)據(jù)
LoadShi();
//加載區(qū)的數(shù)據(jù)
LoadQu();
//給省的下拉加點(diǎn)擊事件
$("#sheng").click(function(){
//重新加載市
LoadShi();
//重新加載區(qū)
LoadQu();
})
//給市的下拉加點(diǎn)擊事件
$("#shi").click(function(){
//重新加載區(qū)
LoadQu();
})
});
//加載省份的方法
function LoadSheng()
{
//省的父級代號
var pcode = "0001";
$.ajax({
async:false,
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.trim().split("|");
var str = "";
for(var i=0;ihang.length;i++)
{
var lie = hang[i].split("^");
str = str+"option value='"+lie[0]+"'>"+lie[1]+"/option>";
}
$("#sheng").html(str);
}
});
}
//加載市的方法
function LoadShi()
{
//找市的父級代號
var pcode = $("#sheng").val();
$.ajax({
async:false,
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.trim().split("|");
var str = "";
for(var i=0;ihang.length;i++)
{
var lie = hang[i].split("^");
str = str+"option value='"+lie[0]+"'>"+lie[1]+"/option>";
}
$("#shi").html(str);
}
});
}
//加載區(qū)的方法
function LoadQu()
{
//找區(qū)的父級代號
var pcode = $("#shi").val();
$.ajax({
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.trim().split("|");
var str = "";
for(var i=0;ihang.length;i++)
{
var lie = hang[i].split("^");
str = str+"option value='"+lie[0]+"'>"+lie[1]+"/option>";
}
$("#qu").html(str);
}
});
}
3. chuli.php
?php
//給一個(gè)父級代號,返回該父級代號下所有的子地區(qū)
require "DBDA.class.php";
$db=new DBDA();
$pcode=$_POST["pcode"];
$sql="select areacode,areaname from chinastates where parentareacode='{$pcode}'";
echo $db->StrQuery($sql);
引用的封裝類里面返回字符串的方法
?php
class DBDA
{
public $host = "localhost";
public $uid = "root";
public $pwd = "123";
public $dbname = "test_123";
//執(zhí)行SQL語句返回相應(yīng)的結(jié)果
//$sql 要執(zhí)行的SQL語句
//$type 代表SQL語句的類型,0代表增刪改,1代表查詢
function query($sql,$type=0)
{
$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
$result = $db->query($sql);
if($type)
{
//如果是查詢,顯示數(shù)據(jù)
return $result->fetch_all();
}
else
{
//如果是增刪改,返回true或者false
return $result;
}
}
//返回字符串的方法
public function strquery($sql,$type=1)
{
$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
$result = $db->query($sql);
$arr = $result->fetch_all();
$str="";
foreach($arr as $v)
{
$str = $str.implode("^",$v)."|";
}
$str = substr($str,0,strlen($str)-1);
return $str;
}
//返回JSON
function JSONQuery($sql,$type=1)
{
$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
$r = $db->query($sql);
if($type==1)
{
return json_encode($r->fetch_all(MYSQLI_ASSOC));
}
else
{
return $r;
}
}
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:- PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級聯(lián)動
- asp.net省市三級聯(lián)動的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- AJAX省市區(qū)三級聯(lián)動下拉菜單(java版)
- AJAX和WebService實(shí)現(xiàn)省市縣三級聯(lián)動具體代碼
- ajax.net +jquery 無刷新三級聯(lián)動的實(shí)例代碼
- ajax實(shí)現(xiàn)無刷新省市縣三級聯(lián)動
- Ajax商品分類三級聯(lián)動的簡單實(shí)現(xiàn)(案例)
- jquery+ajax實(shí)現(xiàn)省市區(qū)三級聯(lián)動效果簡單示例
- Ajax+php實(shí)現(xiàn)商品分類三級聯(lián)動
- ajax實(shí)現(xiàn)三級聯(lián)動的基本方法