查询数据库中的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. 使用Statement执行sql语句

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; import java ...

  2. LeetCode_ Merge k Sorted Lists

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. / ...

  3. C++中对sprintf()函数的说明(转)

    在将各种类型的数据构造成字符串时,sprintf 的强大功能很少会让你失望.由于sprintf 跟printf 在用法上几乎一样,只是打印的目的地不同而已,前者打印到字符串中,后者则直接在命令行上输出 ...

  4. Android中PopupWindow中有输入框时无法弹出输入法的解决办法

    PopupWindow window=new PopupWindow(view, LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT); //必须让p ...

  5. 转自http://blog.sina.com.cn/daylive——C++ STL set&multiset

    C++ STL set和multiset的使用 1,set的含义是集合,它是一个有序的容器,里面的元素都是排序好的,支持插入,删除,查找等操作,就  像一个集合一样.所有的操作的都是严格在logn时间 ...

  6. Google Code Jam 2012 round 2 problem A: Swinging Wild

    题目连接 题意:你要从起点经过绳子荡到终点,每次你必须抓住另一个绳子,在空中不能向下爬.问是否有合理的方案 做法: 直接模拟 #include <iostream> #include &l ...

  7. vb安装过程中 ntvdm.exe[9696]中发生未处理的win32异常

    最近电脑总是出问题导致我的学习效率很低,前几天在用VB6.0的时候有个知识点不太熟悉,于是按F1发现不会出来帮助文档.突然想到重新装系统之后忘记了安装MSDN帮助插件,就在我安装这个软件的时候发现电脑 ...

  8. 日期函数(SqlServer)

    1.常用日期方法(下面的GetDate() = '2006-11-08 13:37:56.233') (1)DATENAME ( datepart ,date ) 返回表示指定日期的指定日期部分的字符 ...

  9. 常用的MIME类型(资源的媒体类型)

    后缀名 MIME名称 *.3gpp audio/3gpp, video/3gpp *.ac3 audio/ac3 *.asf allpication/vnd.ms-asf *.au audio/bas ...

  10. JS-事件处理

    1.一个简单的单击事件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...