欢迎来到 黑吧安全网 聚焦网络安全前沿资讯,精华内容,交流技术心得!

如何通过ajax实现三级联动功能

来源:本站整理 作者:佚名 时间:2017-06-11 TAG: 我要投稿

本文实例为大家分享了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页面
 <?php
include("DBDA.class.php");
$db = new DBDA();
$pcode = $_POST["pcode"];
$sql = "select * from chinastates where parentareacode='{$pcode}'";
echo $db->StrQuery($sql);
以上就是本文的全部内容,希望对大家的学习有所帮助

【声明】:黑吧安全网(http://www.myhack58.com)登载此文出于传递更多信息之目的,并不代表本站赞同其观点和对其真实性负责,仅适于网络安全技术爱好者学习研究使用,学习中请遵循国家相关法律法规。如有问题请联系我们,联系邮箱admin@myhack58.com,我们会在最短的时间内进行处理。
  • 最新更新
    • 相关阅读
      • 本类热门
        • 最近下载