主页面代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../wenjian/jquery-2.2.3.min.js"></script>
  7. </head>
  8. <body>
  9. <select id="sheng">
  10.     <option>请选择</option>
  11. </select>
  12. <select id="shi">
  13.     <option >请选择</option>
  14. </select>
  15. <select id="qu">
  16.     <option >请选择</option>
  17. </select>
  18. </body>
  19. </html>
  20. <script>
  21.     $.ajax({
  22.         data: {parent_id: 0}, //发送的数据
  23.         dataType: "json", //返回值的类型 text为string型
  24.         type: 'post',   //发送请求的方法(get)
  25.         url: 'sheng_l.php',//发送请求的地址
  26.         success: function (data) {//发送成功时的回调函数
  27.     //            console.log(data);
  28.             for (var i in data) {
  29.                 $("#sheng").append("<option value='"+ data[i][2] +"'>" + data[i][1]  +"</option>")
  30.             }
  31.         }
  32.     })
  33.     $(document).ready(function () {
  34.         $("#sheng").change(function () {
  35.             $("#shi").get(0).options.length= 1;
  36. //            $("#qu").get(0).options.length= 1;
  37.             var data = $("#sheng").find("option:selected").val();
  38.             $.ajax({
  39.                 data:{parent_id:data},
  40.                 type:"post",
  41.                 dataType:"json",
  42.                 url:"sheng_l.php",
  43.                 success:function (data) {
  44.                     for(var i in data){
  45.                         $("#shi").append("<option value='" + data[i][2] +"'>" + data[i][1] +"</option>")
  46.                     }
  47.                 }
  48.             })
  49.         })
  50.     })
  51.     $(document).ready(function () {
  52.         $("#shi").change(function () {
  53.             $("#qu").get(0).options.length= 1;
  54.             var data = $("#shi").find("option:selected").val();
  55.             $.ajax({
  56.                 data:{parent_id:data},
  57.                 type:"post",
  58.                 dataType:"json",
  59.                 url:"sheng_l.php",
  60.                 success:function (data) {
  61.                     for (var i in data){
  62.                         $("#qu").append("<option value='" +data[i][2] +"'>" +data[i][1] +"</option>")
  63.                     }
  64.                 }
  65.             })
  66.         })
  67.     })

处理页面代码

  1. <?php
  2. /**
  3.  * Created by fcc
  4.  * User: Administrator
  5.  * Date: 2017/10/29
  6.  * Time: 20:56
  7.  */
  8. require_once "../wenjian/DBDA.class.php";
  9. $db = new DBDA();
  10. $sql = "select * from region WHERE father_id = {$_POST['parent_id']}";
  11. $result = $db->Query($sql);
  12. echo json_encode($result);

ajax 三级联动写法的更多相关文章

  1. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

  2. 使用 AJAX + 三级联动 实现分类出全国各地的省，市，区

    使用AJAX + 三级联动  实现分类出全国各地的省,市,区 也可以将下面的显示页面所写的 function循环,封装成js文件,就是在写代码软件里创建一个js文件,就和创建一个HTML或php文件一 ...

  3. AJAX 三级联动

    新的封装类 <?php class DBDA { public $host="localhost";//服务器地址 public $uid="root"; ...

  4. ajax三级联动下拉菜单

    ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...

  5. 0509 关于Ajax + 三级联动示例

    关于Ajax 1.干什么的? ajax负责抓取用户名信息,传递给服务器进行校验: 2.属性: onreadystatechange:事件,该事件可以感知ajax状态(readyState)的变化.aj ...

  6. [Ajax三级联动 无刷新]

    三级联动 的效果图 html页面: <body> <label class="fl">区域:</label> <select class= ...

  7. 2019.03.25 Ajax三级联动

    所谓三级联动就是,一层接着一层,根据上一层的选择给出这一层的结果 如选择市之后,会给出相应的区,然后到相应的县这就是联动 配置视图 ​from django.core import serialize ...

  8. ajax 三级联动商品分类（转载）

    转载  自  jines     http://www.cnblogs.com/lijinblogs/p/5759399.html 思路分析:效果:当页面加载时,利用ajax异步向后台请求数据,加载一 ...

  9. Ajax三级联动

    全国省市县查询 html代码 <!doctype html> <html> <head> <meta charset="utf-8"> ...

随机推荐

  1. Vivaldi解决flash插件问题

    Vivaldi浏览器 Vivaldi是Opera联合创始人.前CEO谭咏文(Jon von Tetzchner)2015年1月27日发布的一款浏览器,具有个性化的笔记功能,带有迷你屏幕截图的书签,以及 ...

  2. Master Nginx(6) - The Nginx HTTP Server

    Nginx's architecture The HTTP core module The server Logging Finding files Name resolution Client in ...

  3. 洛谷P3375【模板】KMP字符串匹配

    题目描述 如题,给出两个字符串s1和s2,其中s2为s1的子串,求出s2在s1中所有出现的位置. 为了减少骗分的情况,接下来还要输出子串的前缀数组next. (如果你不知道这是什么意思也不要问,去百度 ...

  4. 百度地图API位置偏移的校准算法

    转自极客人原文 百度地图API位置偏移的校准算法 在开始使用百度地图API进行开发时可能会遇到一件相当奇怪的事情,使用百度定位的经纬度在地图上显示相当不准确,这一问题我在微信开发和安卓开始时都遇到过. ...

  5. oracle latch

    (转载 : http://www.dbtan.com/2010/05/latch-free.html) Latch Free(闩锁释放):Latch Free通常被称为闩锁释放,这个名称常常引起误解, ...

  6. [Python]croppic 裁剪图片的Python后台实现

    import cStringIO import io import base64 from PIL import Image, ImageTk def img_crop_to_file(request ...

  7. Clojure：通过cursive连接远程REPL服务器

    配置很简单,步骤如下:1.    选择Edit Configurations…2.    选择Clojure REPL -> Remote3.    输入远程服务器的ip和端口. 最后点运行就可 ...

  8. AngularJS：一行JS代码实现控件验证效果

    如上图所示,我们需要实现如下这些验证功能: 控件都是必输控件 都需要控制最大长度 第一次打开页面,控件不能显示为错误状态 输入内容再清空后,必输控件需要显示为错误状态 只有所有输入合法后,发布按钮才能 ...

  9. Clojure：解决Selmer与AngularJS的 标签混淆问题

    Selmer是Clojure的一个模板类库,下面是它的一个DEMO模板: <ul> {% for item in items %} <li>{{item}}</li> ...

  10. 搭建LVS+Keepalived负载均衡集群

    这两天学习了LVS+Keepalived负载均衡的搭建.网上的教程非常多,可是动起手来遇到不少问题. 如今把自己的搭建过程以及遇到的一些问题给分享下. 硬件环境: Macbook 8G内存.250G ...