查询数据库中的chinastates表,通过父级代号查询相应省市区.

实现界面：

在js页面实现三级联动

在JQuery中调用Ajax方法(引用JQuery文件一定放在最上面)

用插件的形式,创建三个下拉列表

一、主页面：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>ajax三级联动</title>

 <script src="../jquery-1.11.2.min.js"></script>

 <script src="sanji.js"></script>

 </head>

 <body>

 <h1>三级联动</h1>

 <div id="sanji"></div>

 </body>

 </html>

二、在js页面实现三级联动

 // JavaScript Document

 $(document).ready(function(e) {

     //将DIV里面写入三个下拉列表

     $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");

     //填充内容，显示在页面上

     //1.填充省

     FillSheng();    

     //2.填充市

     FillShi();

     //3.填充区

     FillQu();    

     //如果省选中变化的时候，去填充市和区

     $("#sheng").change(function(){

         //改变市

         FillShi();

         //改变区

         FillQu();

         })

     //如果市选中变化的时候，去改动区

     $("#shi").change(function(){

         //改变区

         FillQu();

         })

         //填充省的方法

         function FillSheng()

         {

             //找到父级代号

             var pcode="0001";

             //调用ajax

             $.ajax({

                 async:false,

                 url:"ChuLi.php",

                 data:{pcode:pcode},

                 type:"POST",

                 dataType:"TEXT",

                 success:function(data){

                     var str="";

                     var hang=data.split("|");

                     for(var i=0; i<hang.length; i++)

                     {

                         var lie=hang[i].split("^");

                         str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";

                         }

                 $("#sheng").html(str);

                     }

                 });

             }

         //填充市的方法

         function FillShi()

         {

             //找到父级代号

             var pcode=$("#sheng").val();

             //调用ajax

             $.ajax({

                 async:false,

                 url:"ChuLi.php",

                 data:{pcode:pcode},

                 type:"POST",

                 dataType:"TEXT",

                 success:function(data){

                     var str="";

                     var hang=data.split("|");

                     for(var i=0; i<hang.length; i++)

                     {

                         var lie=hang[i].split("^");

                         str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";

                         }

                 $("#shi").html(str);

                 }

                 });

             }

         //填充区的方法

         function FillQu()

         {

             //找到父级代号

             var pcode=$("#shi").val();

             //调用ajax

             $.ajax({

                 async:false,

                 url:"ChuLi.php",

                 data:{pcode:pcode},

                 type:"POST",

                 dataType:"TEXT",

                 success:function(data){

                     var str="";

                     var hang=data.split("|");

                     for(var i=0; i<hang.length; i++)

                     {

                         var lie=hang[i].split("^");

                         str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";

                         }

                 $("#qu").html(str);

                 }

                 });

             }

 });

三、处理页面：

 <?php

 //取到传过来的父级代号

 $pcode=$_POST["pcode"];

 //引入类

 include ("../DBDA.class.php");

 $db=new DBDA();

 //写SQL语句

 $sql="select AreaCode, AreaName, ParentAreaCode from chinastates where ParentAreaCode='{$pcode}'";

 //执行

 echo $db->StrQuery($sql);

Ajax实现三级联动(0520)的更多相关文章

  1. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  2. ajax 实现三级联动

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  3. 在使用ajax实现三级联动调用数据库数据并通过调出的数据进行二级表单查询

    在使用ajax实现三级联动查询数据库数据后再使用ajax无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...

  4. ajax 实现三级联动下拉菜单

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  5. PHP ajax 实现三级联动

    在一个单独JS页面中,利用ajax实现三级联动,做成一个三级联动形式,以便于以后随时调用 JS代码: $(document).ready(function(e) { $("#sanji&qu ...

  6. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  7. 完整的Ajax及三级联动小练习

    Ajax结构: var name = $("#text_1").val(); $.ajax({ url: "Ashxs/Handler.ashx",//一般处理 ...

  8. php+ajax的三级联动下拉菜单

    封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...

  9. 基于jQuery的AJAX实现三级联动菜单

    最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...

随机推荐

  1. 【学习笔记】【oc】类的包装类 协议 category

    1.类的两种包装类: 将基本数据包装成对象:NSValue:NSNumber; NSValue是NSNumber的父类, NSValue用来封装一些基本数据, NSValue是一个通用的包装类,用来包 ...

  2. 隐藏NGINX服务器名称 和版本号

    隐藏NGINX服务器名称: 修改或隐藏服务器名称需要修改源码nginx.h,nginx.h在src/core/目录下 .具体操作如下: 把下面两个宏的值修改为自己设定的值,例如"NGX&qu ...

  3. 无递归 A星寻路算法

    整理硬盘的时候,发现我早些年写的A星寻路算法.特放上来,待有缘人拿去,无递归噢,性能那是杠杠的. 码上伺候 public class Node { public int X { get; set; } ...

  4. New ipad install Metasploit(New ipad 安装Metasploit)

    Title:New ipad install Metasploit(New ipad 安装Metasploit) --2012-09-19 11:35 越狱以后,Ssh或者终端Ipad,把屏幕锁定最好 ...

  5. Android对ScrollView滚动监听，实现美团、大众点评的购买悬浮效果

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢! 我之前写 ...

  6. Attach file to database

    D:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA databaseName.mdf databaseName.l ...

  7. Linux read语法及浅析

    read命令 -n(不换行) -p(提示语句) -n(字符个数) -t(等待时间) -s(不回显) 1.基本读取read命令接收标准输入(键盘)的输入,或其他文件描述符的输入(后面在说).得到输入后, ...

  8. tesseract-ocr图片识别开源工具

    tesseract-ocr图片识别开源工具 今天看同事的ppt,提到了图片识别,又tesseract-ocr,觉得不错,试一下,如果效果好可以用来做验证码的识别 http://code.google. ...

  9. JS(五)

    感觉JS里面还是有很多小技巧的,知道套路了,其实实现起来其实也还没有想象中的那么复杂.不过我觉得还是要把所学的知识融会贯通吧,不能学了JS就忘了前面的知识,结合起来才会威力无穷. 1.跑马灯:弹弹弹 ...

  10. prototype对象的真正作用

    参考阮一峰的文章:http://javascript.ruanyifeng.com/oop/encapsulation.html prototype对象的真正作用 在JavaScript语言中,每一个 ...