欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-07-05 19:32:25
本文实例为大家分享了ajax实现三级联动的具体代码，供大家参考，具体内容如下 1.首先在一个页面上布置一个div 方便日后引用方法 ...

本文实例为大家分享了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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： 莴笋怎么处理呢，你还在用最笨拙的方法么？

下一篇： Ajax解决多余刷新的两种方法(总结)

推荐阅读