Ajax实现三级联动的具体内容
来源：爱站网时间：2020-12-24编辑：网友分享
三级联动是一个小插件，我们在使用数据库的时候会使用的比较多，今天就让爱站技术频道小编为大家介绍Ajax实现三级联动的具体内容，希望对你学习有所帮助。
三级联动是一个小插件，我们在使用数据库的时候会使用的比较多，今天就让爱站技术频道小编为大家介绍Ajax实现三级联动的具体内容，希望对你学习有所帮助。
具体内容如下
1.首先在一个页面上布置一个div 方便日后引用方法
//div的id为“sanji”
2.sanji js处理页面
$(document).ready(function(){
//向div里面放三个下拉菜单
var str = "";
//给三个下拉列表定义 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 +="";
}
$("#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"+lie[1]+"";
}
$("#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"+lie[1]+"";
}
$("#qu").html(str);
}
});
}
4.chuli页面
StrQuery($sql);
以上就是爱站技术频道小编介绍的Ajax实现三级联动的具体内容，除了本文之外这里还有很多其他的专业知识，如果还想了解更多请继续关注js.aizhan.com吧！
