本文實例為大家分享了ajax實現三級聯動的具體代碼，供大家參考，具體內容如下
1.首先在一個頁面上布置一個div 方便日后引用方法
body>
div id="sanji">//div的id為“sanji”
/div>
2.sanji js處理頁面
$(document).ready(function(){
//向div里面放三個下拉菜單
var str = "select id='sheng'>/select>
select id='shi'>/select>
select id='qu'>/select>";
//給三個下拉列表定義 str 變量
$("#sanji").html(str);
FillSheng();
FillShi();
FillQu();//Sheng Shi Qu的邏輯順序
$("#sheng").change(function(){
FillShi();
FillQu();
})//給sheng菜單添加點擊事件
$("#shi").change(function(){
FillQu();
})//給shi菜單添加點擊事件
});//頁面加載完成之后過來執行某些代碼
3.填充sheng方法
function FillSheng()
{
var pcode = "";//定義一個變量
$.ajax({
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success:function(data){
var hang = data.split("^");
str +="option value='"+lie[0]+"'>"+lie[1]+"/option>";
}
$("#sheng").html(str);
});
}
2.填充shi方法
function FillShi()
{
var pcode = $("#sheng").val();
$.ajax({
async:false,
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");
var str = "";
for(var i=0;ihang.length;i++)
{
var lie = hang[i].split("^");
str += "option value='"+lie[0]+"'>"+lie[1]+"/option>";
}
$("#shi").html(str);
}
});
}
3.填充qu方法
function FillQu()
{
var pcode = $("#shi").val();
$.ajax({
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");
var str = "";
for(var i=0;ihang.length;i++)
{
var lie = hang[i].split("^");
str += "option value='"+lie[0]+"'>"+lie[1]+"/option>";
}
$("#qu").html(str);
}
});
}
4.chuli頁面
?php
include("DBDA.class.php");
$db = new DBDA();
$pcode = $_POST["pcode"];
$sql = "select * from chinastates where parentareacode='{$pcode}'";
echo $db->StrQuery($sql);
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- PHP+Mysql+Ajax+JS實現省市區三級聯動
- AJAX省市區三級聯動下拉菜單(java版)
- ajax三級聯動下拉菜單效果
- ajax三級聯動的實現方法
- ajax實現無刷新省市縣三級聯動
- Ajax商品分類三級聯動的簡單實現(案例)
- Ajax+php實現商品分類三級聯動
- ajax實現省市三級聯動效果
- 簡單實現ajax三級聯動效果
- AJAX實現省市縣三級聯動效果
