主页面：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="sheng">
    <option>请选择</option>
</select>
<select id="shi">
    <option>请选择</option>
</select>
<select id="xian">
    <option>请选择</option>
</select>
<script src="../js/jquery-2.2.3.min.js"></script>
<script>
    $.ajax({
        data: {parent_id: 0}, //发送的数据
        dataType: "json", //返回值的类型 text为string型
        type: 'post',   //发送请求的方法(get)
        url: 'sheng.php',//发送请求的地址
        success: function (data) {//发送成功时的回调函数
//            console.log(data);
            for (var i in data) {
                $("#sheng").append("<option value='"+ data[i][2] +"'>" + data[i][1]  +"</option>")
            }
        }
    })

    $("#sheng").change(function(){
        $("#shi").get(0).options.length=1;
        var data = $("#sheng").find("option:selected").val();
        $.ajax({
            data: {parent_id: data}, //发送的数据
            dataType: "json", //返回值的类型 text为string型
            type: 'post',   //发送请求的方法(get)
            url: 'sheng.php',//发送请求的地址
            success: function (data) {//发送成功时的回调函数
                for (var i in data) {
                    $("#shi").append("<option value='"+ data[i][2] +"'>" + data[i][1]  +"</option>")
                }
            }
        })
    })

    $("#shi").change(function(){
        $("#xian").get(0).options.length= 1;
        var data = $("#shi").find("option:selected").val();
        $.ajax({
            data: {parent_id: data}, //发送的数据
            dataType: "json", //返回值的类型 text为string型
            type: 'post',   //发送请求的方法(get)
            url: 'sheng.php',//发送请求的地址
            success: function (data) {//发送成功时的回调函数
                for (var i in data) {
                    $("#xian").append("<option value='"+ data[i][2] +"'>" + data[i][1]  +"</option>")
                }
            }
        })
    })
</script>
</body>
</html>

处理页面sheng.php：
<?php
require_once "../db/DBDA.class.php";
$db = new DBDA();
$sql = "select * from region WHERE father_id = {$_POST['parent_id']}";
$result = $db->Query($sql);
echo json_encode($result);
?>

三级联动下拉列表——php 、Ajax的更多相关文章

  1. Java下使用Apache POI生成具有三级联动下拉列表的Excel文档

    使用Apache POI生成具有三级联动下拉列表的Excel文档: 具体效果图与代码如下文. 先上效果图: 开始贴代码,代码中部分测试数据不影响功能. 第一部分(核心业务处理): 此部分包含几个方面: ...

  2. 省份-城市-区域三级联动【struts2 + ajax +非数据库版】

    package loaderman; /** * 实体,封装省份和城市 */ public class Bean { private String province;//省份 private Stri ...

  3. ajax——实现三级联动下拉列表

    数据库: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  4. 省市区三级联动（jquery+ajax）（封装和不封装两种方式）-----2017-05-15

    首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国 ...

  5. 【转】纯JS省市区三级联动（行政区划代码更新至2015-9-30）

    本文代码实现的功能是省市区三级联动下拉列表,纯Javascript,网上已有很多这方面的代码.但是作为一个新手,这是我的第一篇CSDN博客,发此文的目的主要是学习交流,希望看到的朋友发现有什么不对的地 ...

  6. JAVA EE 中之AJAX 无刷新地区下拉列表三级联动

    JSP页面 <html> <head> <meta http-equiv="Content-Type" content="text/html ...

  7. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  8. Ajax实现三级联动(0520)

    查询数据库中的chinastates表,通过父级代号查询相应省市区. 实现界面: 在js页面实现三级联动 在JQuery中调用Ajax方法(引用JQuery文件一定放在最上面) 用插件的形式,创建三个 ...

  9. 使用php ajax写省、市、区、三级联动

    题目要求: 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用china ...

随机推荐

  1. 802.1X与Cisco基于身份的网络服务（IBNS）

    Cisco基于身份的网络服务(Identity-Based Networking Services,IBNS)是一种以IEEE802.1X标准为基础的安全架构,具有认证.用户策略.访问控制等多种功能, ...

  2. inline-block,真的懂吗

    曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码.如今 ...

  3. LinkQueue(链队)

    今天学习了队列,因为前面写了好几个链表实现的数据结构基本上都懂了,然后大致了解了一下队列的特点,便决定用自己的理解来实现一个,然后实现了. (2018-02-14 代码更新) Head file: # ...

  4. echarts做飞线图

    先上图,要不感觉没有说服力: 飞线图应该是大屏中很常见的一种了,通常你可以很轻易的用datav做一个飞线图,而且datav做的大屏逼格真的很高,本身也是开源免费的项目,开箱即用,上手简单……行了回归正 ...

  5. 阿里云服务器安装nginx（ubantu16.04）

    下载安装包 sudo wget http://nginx.org/download/nginx-1.15.5.tar.gz 解压缩 tar zxvf nginx-1.15.5.tar.gz 打开目录 ...

  6. Day11 - Q - A Multiplication Game HDU - 1517

    题目链接 本题很像bash博弈,但又有些许不同,因为这里是乘法,我们可以列出前几项可能 若n=2-9,那么first可以一次取完 若n=10-18,无论first怎么取,second都能一次取完 若n ...

  7. 什么是CSRF攻击？如何避免？

    跨站请求伪造(英语:Cross-site request forgery),也被称为 one-click attack 或者 session riding,通常缩写为 CSRF 或者 XSRF, 是一 ...

  8. Java8新特性——Optional

    前言 在开发中,我们常常需要对一个引用进行判空以防止空指针异常的出现.Java8引入了Optional类,为的就是优雅地处理判空等问题.现在也有很多类库在使用Optional封装返回值,比如Sprin ...

  9. 笔记-爬虫部署及运行工具-scrapydweb

    笔记-爬虫部署及运行工具-scrapydweb 1.      简介 scrapyd是爬虫部署工具,但它的ui比较简单,使用不是很方便. scrapydweb以scrapyd为基础,增加了ui界面和监 ...

  10. P1135奇怪的电梯

    P1135奇怪的电梯 #include <iostream> #include <cstdio> #include <cstring> #include <a ...