使用ajax怎么实现三级联动

本篇文章为大家展示了使用ajax怎么实现三级联动,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

从策划到设计制作,每一步都追求做到细腻,制作可持续发展的企业网站。为客户提供网站设计、网站建设、网站策划、网页设计、域名与空间、虚拟空间、网络营销、VI设计、 网站改版、漏洞修补等服务。为客户提供更好的一站式互联网解决方案,以客户的口碑塑造优易品牌,携手广大客户,共同发展进步。

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 +=""+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"+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怎么实现三级联动,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。


新闻标题:使用ajax怎么实现三级联动
链接分享:http://bzwzjz.com/article/ipidcc.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站设计 网站制作 手机网站设计 成都网站建设公司 成都网站建设公司 重庆外贸网站建设 H5网站制作 企业手机网站建设 教育网站设计方案 网站建设方案 网站建设公司 网站制作 成都网站建设 营销型网站建设 外贸营销网站建设 营销型网站建设 网站建设改版 网站建设方案 成都网站建设推广 网站制作 成都网站制作 成都网站设计