主页面：
<!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. Docker 安装 Logstash

    使用同版本镜像 7.4.1 1.下载Logstash镜像 docker pull logstash: #查看镜像 docker images 2.编辑logstash.yml配置文件logstash. ...

  2. Passive Client Feature

    Q. How is the passive client feature used on Wireless LAN Controllers? A. Passive clients are wirele ...

  3. 再次立个flag

    今天2019.9.18 从上次迷茫到现在,差不多过去快一年了.   准确点是 442 天 我顺便大概看了一下上次迷茫时期的日志,总觉的不可思议.上次是毕业大概几个月,到目前其实也没多久,但是我变了.. ...

  4. CF908D 【New Year and Arbitrary Arrangement】

    蒟蒻渣渣禹小心翼翼发布题解.... 这道题,嗯,期望,dp,好,我们有思路了.... however, 主要问题在于字符串无限延伸,so,我们需要考虑记录前缀的关键量来为DP设置终止状态. 我们不妨设 ...

  5. apache 配置虚拟目录

    #注释掉apache默认的网站目录地址 #DocumentRoot "c:/Rrogram Files/Apache/htdocs" #配置一个虚拟目录 <ifModule ...

  6. leetCode练题——26. Remove Duplicates from Sorted Array

    1.题目 26. Remove Duplicates from Sorted Array--Easy Given a sorted array nums, remove the duplicates  ...

  7. 「JLOI2014」松鼠的新家

    「JLOI2014」松鼠的新家 传送门 两种做法: 树上差分 \(O(n)\) 树链剖分 \(O(nlogn)\) 树剖比较好写而且无脑,树上差分复杂度优秀一些但是会有点难调. 这里给出树剖写法: 唯 ...

  8. liux vim 命令

    清除所有行 先 gg 再 dG

  9. uniGUI学习汇总

    UniGUI之UniLabel(31) uniGUI之自定义JS事件动作ClientEvents(30) uniGUI之文件下载(29) uniGUI之FDQuery(28) uniGUI之UniPo ...

  10. Struts2学习（七）

    Servlet实现下载 1.Servlet 3.1之前实现文件上传 package ecut.request; import java.io.BufferedReader; import java.i ...