1.引入JS and Jquery包

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <script src="jquery-1.11.2.min.js"></script>
  7. <script src="sanji.js"></script>
  8. </head>
  9.  
  10. <body>
  11.     <div id="sanji">
  12.  
  13.     </div>
  14. </body>
  15. </html>

2.JS包代码

  1. // JavaScript Document
  2. $(document).ready(function(e) {
  3.  
  4.     //向DIV里面扔三个下拉
  5.     var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";
  6.     $("#sanji").html(str);
  7.  
  8.     FillSheng();
  9.     FillShi();
  10.     FillQu();
  11.  
  12.     $("#sheng").change(function(){
  13.             FillShi();
  14.             FillQu();
  15.         })
  16.     $("#shi").change(function(){
  17.             FillQu();
  18.         })
  19. });
  20.  
  21. //填充省的方法
  22. function FillSheng()
  23. {
  24.     var pcode = "0001";
  25.     $.ajax({
  26.             async:false,
  27.             url:"chuli.php",
  28.             data:{pcode:pcode},
  29.             type:"POST",
  30.             dataType:"TEXT",
  31.             success: function(data){
  32.                     var hang = data.split("|");
  33.                     var str = "";
  34.                     for(var i=0;i<hang.length;i++)
  35.                     {
  36.                         var lie = hang[i].split("^");
  37.                         str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
  38.                     }
  39.                     $("#sheng").html(str);
  40.                 }
  41.         });
  42. }
  43. //填充市的方法
  44. function FillShi()
  45. {
  46.     var pcode = $("#sheng").val();
  47.     $.ajax({
  48.             async:false,
  49.             url:"chuli.php",
  50.             data:{pcode:pcode},
  51.             type:"POST",
  52.             dataType:"TEXT",
  53.             success: function(data){
  54.                     var hang = data.split("|");
  55.                     var str = "";
  56.                     for(var i=0;i<hang.length;i++)
  57.                     {
  58.                         var lie = hang[i].split("^");
  59.                         str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
  60.                     }
  61.                     $("#shi").html(str);
  62.                 }
  63.         });
  64. }
  65. //填充区的方法
  66. function FillQu()
  67. {
  68.     var pcode = $("#shi").val();
  69.     $.ajax({
  70.             url:"chuli.php",
  71.             data:{pcode:pcode},
  72.             type:"POST",
  73.             dataType:"TEXT",
  74.             success: function(data){
  75.                     var hang = data.split("|");
  76.                     var str = "";
  77.                     for(var i=0;i<hang.length;i++)
  78.                     {
  79.                         var lie = hang[i].split("^");
  80.                         str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
  81.                     }
  82.                     $("#qu").html(str);
  83.                 }
  84.         });
  85. }

3.PHP处理页面

  1. <?php
  2. include("DBDA.class.php");
  3. $db = new DBDA();
  4.  
  5. $pcode = $_POST["pcode"];
  6.  
  7. $sql = "select * from chinastates where parentareacode='{$pcode}'";
  8.  
  9. echo $db->StrQuery($sql);

Ajax做无刷新三级联动的更多相关文章

  1. JQuery中国省市区无刷新三级联动查询

    之前有写过用<Ajax控件来实现中国的省市区无刷新查询> 今天用JQuery来实现,用Ajax控件和JQuery的优缺点就先不说了. 效果图如下: 下面来结合代码来详细说明一下如何用JQu ...

  2. Hibernate+DWR无刷新三级联动

    DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在 ...

  3. Hibernate+struts+JqueryAjax+jSON实现无刷新三级联动

    看网上JqueryAjax三级联动的例子讲不是很全,代码也给的不是很全,给初学者带来一定的难度.小弟自己写了一个,可能有些地方不是很好,希望大家能够提出建议. 用的是Hibernate+struts2 ...

  4. Ajax做无刷新分页

    1.主页面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  5. ajax实现无刷新两级联动DropDownList

    ajax实现的无刷新三级联动 http://zhangyu028.cnblogs.com/articles/310568.html 本文来自小山blog:http://singlepine.cnblo ...

  6. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  7. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  8. jsp+ajax实现无刷新

    jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名(本功能多用于注册) input.jsp(表单提交页面): %@ page content ...

  9. window.history.pushState与ajax实现无刷新更新页面url

    ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...

随机推荐

  1. Some day some time we will do

    Age has been reached the end of the beginning of the world,May be guilty in his seems to passing a l ...

  2. NetCDF 介绍

    NetCDF 1 NetCDF 1.1概述(Overview) NetCDF (network Common Data Form) is a set of software libraries and ...

  3. requirejs源码分析: requirejs 方法–1. 主入口

    该方法是 主要的入口点 也是最常用的方法. req = requirejs = function (deps, callback, errback, optional) { //Find the ri ...

  4. [笔记]Go语言在Linux环境下输出彩色字符

    Go语言要打印彩色字符与Linux终端输出彩色字符类似,以黑色背景高亮绿色字体为例: fmt.Printf("\n %c[1;40;32m%s%c[0m\n\n", 0x1B, & ...

  5. git在IDEA中的使用

    学习资料: http://blog.csdn.net/autfish/article/details/52513465  (关于提交的讲解) http://blog.csdn.net/ck443870 ...

  6. 留言处插入xss不弹框

    对于新手来说,往往会在留言地方插入<script>alert(1)</script>来检测是否有存储xss,事实是基本上不会弹框的,为啥? 通过查看源码,可知道<> ...

  7. iOS 9 的新功能 universal links

    什么是 universal links: (通用链接) 一种能够方便的通过传统 HTTP 链接来启动 APP, 使用相同的网址打开web page和 APP的方式. 第一点,链接打开网址 顾名思义 第 ...

  8. Spring 手动获取request和response

    //获取responseHttpServletResponse response = ((ServletRequestAttributes) RequestContextHolder.getReque ...

  9. create_workqueue和create_singlethread_workqueue【转】

    本文转载自:http://bgutech.blog.163.com/blog/static/18261124320116181119889/ 1. 什么是workqueueLinux中的Workque ...

  10. shell中嵌套执行expect命令实例（利用expect实现自动登录）

    expect是 #!/bin/bashpasswd='123456'/usr/bin/expect <<EOFset time 30spawn ssh root@192.168.76.10 ...