查询数据库中的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. js 解析 json

    1.简单的json格式 { "user": [ { "name":"name1", "age":24, "se ...

  2. 消息通信机制NSNotificationCenter -备

    消息通信机制NSNotificationCenter的学习.最近写程序需要用到这类,研究了下,现把成果和 NSNotificationCenter是专门供程序中不同类间的消息通信而设置的,使用起来极为 ...

  3. Facebook和Google如何激发工程师的创造力

    http://taiwen.lofter.com/post/664ff_ad8a15 今天终于“朝圣”了两个伟大的公司——Facebook和Google,对创造力和驱动力的来源有了更多的理解,尤其是对 ...

  4. 51单片机C语言学习笔记8：单片机C51编程规范

    1.单片机C51编程规范- 前言  为了提高源程序的质量和可维护性,从而最终提高软件产品生产力,特编写此规范. 2.单片机C51编程规范-范围 本标准规定了程序设计人员进行程序设计时必须遵循的规范.本 ...

  5. Python web.py 实例和源码分析：

    示例: http://jyd.me/python/cookie-and-session/ simple to do:http://simple-is-better.com/news/309 http: ...

  6. BZOJ3296: [USACO2011 Open] Learning Languages

    3296: [USACO2011 Open] Learning Languages Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 81  Solved: ...

  7. 如何在Windows服务程序中读写HKEY_CURRENT_USER注册表

    在服务程序中想要对注册表HKEY_CURRENT_USER下的内容进行读写,不会返回失败,但是始终无效.原因是: 1.服务运行在系统权限之下,而不是任何一个用户 2.HKEY_CURRENT_USER ...

  8. HDU2196-Computer

    原题连接: http://acm.hdu.edu.cn/showproblem.php?pid=2196 思路: 好了,无敌了,经过昨晚4个钟头+今上午1个小时的奋战,这题终于被我AC了 收获的确是不 ...

  9. HTML的表格玩法

    HTML的表格玩法 HTML也是可已展示表格的,大体结构如下 <!DOCTYPE html> <html lang="en"> <head> & ...

  10. PHP的输出缓冲区

    什么是缓冲区?简单而言,缓冲区的作用就是,把输入或者输出的内容先放进内存,而不显示或者读取.至于为什么要有缓冲区,这是一个很广泛的问题,如果有兴趣,可以在网山找下资料.其实缓冲区最本质的作用就是,协调 ...