当前位置：Gxlcms > JavaScript > ajax实现三级联动（附代码）

ajax实现三级联动（附代码）

时间：2021-07-01 10:21:17 帮助过：8人阅读

这次给大家带来ajax实现三级联动（附代码），ajax实现三级联动的注意事项有哪些，下面就是实战案例，一起来看一下。

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

<body>
<p id="sanji">//p的id为“sanji”
</p>

2.sanji js处理页面

$(document).ready(function(){
   //向p里面放三个下拉菜单
  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);

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

ajax实现三级联动（附代码）

人气教程排行