脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → AJAX相关 → ajax实现三级联动

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

 更新时间：2017年02月14日 11:45:10   作者：王小明爱红领巾  
这篇文章主要为大家详细介绍了ajax实现三级联动的基本方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

您可能感兴趣的文章:

相关文章

  • jquery的ajax同步和异步的理解及示例

    jquery的ajax同步和异步的理解及示例

    最近的项目用了到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载
    2014-04-04
  • ajax实现分页查询功能

    ajax实现分页查询功能

    这篇文章主要为大家详细介绍了ajax实现分页查询功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • ajax遍历xml文档的方法

    ajax遍历xml文档的方法

    这篇文章主要介绍了ajax遍历xml文档的方法,实例分析了jsp结合Ajax遍历XML文档的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 好用的AJAX类代码分享

    好用的AJAX类代码分享

    好用的AJAX类代码分享，需要的朋友可以参考下。
    2011-11-11
  • ajax提交数据到后台php接收(实现方法)

    ajax提交数据到后台php接收(实现方法)

    下面小编就为大家带来一篇ajax提交数据到后台php接收(实现方法)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • ajax实现登录功能

    ajax实现登录功能

    本文主要介绍了ajax实现登录功能的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 解决ajax的delete、put方法接收不到参数的问题方法

    解决ajax的delete、put方法接收不到参数的问题方法

    今天小编就为大家分享一篇解决ajax的delete、put方法接收不到参数的问题方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • ajax实现数据删除、查看详情功能

    ajax实现数据删除、查看详情功能

    本文主要介绍了ajax实现数据删除、查看详情功能，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • Ajax教程实例详解

    Ajax教程实例详解

    AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。接下来通过本文给大家介绍Ajax教程实例详解，对ajax相关知识感兴趣的朋友一起学习吧
    2016-03-03
  • Ajax的原生实现关于MIME类型的使用方法

    Ajax的原生实现关于MIME类型的使用方法

    下面小编就为大家分享一篇Ajax的原生实现关于MIME类型的使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03

最新评论