本文实例为大家分享了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;
i<hang.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;
i<hang.length;
i++) {
var lie = hang[i].split("^");
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#qu").html(str);
}
}
);
}
4.chuli页面
<?phpinclude("DBDA.class.php");
$db = new DBDA();
$pcode = $_POST["pcode"];
$sql = "select * from chinastates where parentareacode='{
$pcode}
'";
echo $db->StrQuery($sql);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
