这次给大家带来ajax实现三级联动（附代码），ajax实现三级联动的注意事项有哪些，下面就是实战案例，一起来看一下。
1.首先在一个页面上布置一个p 方便日后引用方法
//p的id为“sanji”
登录后复制
2.sanji js处理页面
$(document).ready(function(){ //向p里面放三个下拉菜单 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 +=""+lie[1]+""; } $("#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 += ""+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<hang.length;i++) { var lie = hang[i].split("^"); str += ""+lie[1]+""; } $("#qu").html(str); } });}
登录后复制
4.chuli页面
StrQuery($sql);
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
ajax如何做出页面局部跳转功能
jQuery里ajax.load()方法应如何使用
以上就是ajax实现三级联动（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2767936.html
