• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

ajax实现三级联动的基本方法

jquery 搞代码 4年前 (2021-12-27) 39次浏览 已收录 0个评论

这篇文章主要为大家详细介绍了ajax实现三级联动的基本方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了ajax实现三级联动的具体代码,供大家参考,具体内容如下

1.首先在一个页面上布置一个div 方便日后引用方法

  <div id="sanji">//div的id为“sanji” </div>

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:pco<b style="color:transparent">来源gao@dai!ma.com搞$代^码网</b>de}, 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实现三级联动的基本方法的详细内容,更多请关注gaodaima搞代码网其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:ajax实现三级联动的基本方法

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址