查询数据库中的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. debug 输出 以及宏定义--备

    使用NSLog的一个风险是:它的运行会占用时间和设备资源. 所以在编译版本前一定不要有nslog. 同时当你的工程中有很多log 输出的时候 查找起来很不方便 ,下面介绍一种方法 可以使我们事半功倍. ...

  2. UICollectionView 讲解-备

    什么是UICollectionView UICollectionView是一种新的数据展示方式,简单来说可以把他理解成多列的UITableView(请一定注意这是UICollectionView的最最 ...

  3. 在iOS开发中使用FMDB－备用

    SQLite (http://www.sqlite.org/docs.html) 是一个轻量级的关系数据库.iOS SDK很早就支持了SQLite,在使用时,只需要加入 libsqlite3.dyli ...

  4. STM32的RTC万年历显示问题

    博客整理后写出来的,有点乱,大家见谅! 想让串口输出万年历效果.每次秒刷新一次 结果是串口软件一直输出,看起来很难受 先讲一讲C代码的\r和\n的区别 \r 就是return 回到 本行 行首 这就会 ...

  5. Linux格式化分区报错Could not start /dev/sda No such file or directory 解决办法

    Linux查看已经分好的区[root@linuxidc ~]# fdisk -l /dev/sda   Disk /dev/sda: 21.5 GB, 21474836480 bytes 255 he ...

  6. nodejs定时任务node-schedule

    1:使用npm安装node-schedule模块 npm install node-schedule (1)每隔5分钟执行一次: var schedule = require('node-schedu ...

  7. 64位平台C/C++开发注意事项(转载)

    转自http://coolshell.cn/articles/3512.html 在http://www.viva64.com/en/l/上例出了28个在64位平台上使用C/C++开发的注意事项,对于 ...

  8. 找到 OSChina 早上 8 点钟容易宕机的原因 ？

    最近一段时间,OSChina 网站在早上 8 点出头的时候很容易因为数据库连接池爆满而导致网站宕机.表现的情况是数据库处理大量的查询,堆积大量并发连接,导致无法再连接到数据库,执行一个简单的查询速度也 ...

  9. oschina BI商业智能开源软件

    54款 BI商业智能开源软件 MySQL数据仓库解决方案 Infobright OLAP 分析引擎 Apache Kylin 数据处理和分发系统 Apache NiFi OLAP 数据查询引擎 Dru ...

  10. 动态规划 DP

    10.1.5.253 1143 数字金字塔#include <iostream> #include<string.h> using namespace std; int a[1 ...