主页面代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../wenjian/jquery-2.2.3.min.js"></script>

</head>

<body>

<select id="sheng">

    <option>请选择</option>

</select>

<select id="shi">

    <option >请选择</option>

</select>

<select id="qu">

    <option >请选择</option>

</select>

</body>

</html>

<script>

    $.ajax({

        data: {parent_id: 0}, //发送的数据

        dataType: "json", //返回值的类型 text为string型

        type: 'post',   //发送请求的方法(get)

        url: 'sheng_l.php',//发送请求的地址

        success: function (data) {//发送成功时的回调函数

    //            console.log(data);

            for (var i in data) {

                $("#sheng").append("<option value='"+ data[i][2] +"'>" + data[i][1]  +"</option>")

            }

        }

    })

    $(document).ready(function () {

        $("#sheng").change(function () {

            $("#shi").get(0).options.length= 1;

//            $("#qu").get(0).options.length= 1;

            var data = $("#sheng").find("option:selected").val();

            $.ajax({

                data:{parent_id:data},

                type:"post",

                dataType:"json",

                url:"sheng_l.php",

                success:function (data) {

                    for(var i in data){

                        $("#shi").append("<option value='" + data[i][2] +"'>" + data[i][1] +"</option>")

                    }

                }

            })

        })

    })

    $(document).ready(function () {

        $("#shi").change(function () {

            $("#qu").get(0).options.length= 1;

            var data = $("#shi").find("option:selected").val();

            $.ajax({

                data:{parent_id:data},

                type:"post",

                dataType:"json",

                url:"sheng_l.php",

                success:function (data) {

                    for (var i in data){

                        $("#qu").append("<option value='" +data[i][2] +"'>" +data[i][1] +"</option>")

                    }

                }

            })

        })

    })

处理页面代码

<?php

/**

 * Created by fcc

 * User: Administrator

 * Date: 2017/10/29

 * Time: 20:56

 */

require_once "../wenjian/DBDA.class.php";

$db = new DBDA();

$sql = "select * from region WHERE father_id = {$_POST['parent_id']}";

$result = $db->Query($sql);

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. 00.模块1.模块(Module)和包(Package)

    转自廖雪峰老师官方网站 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件 ...

  2. php 漏洞分析

    addslashes() 函数返回在预定义字符之前添加反斜杠的字符串.

  3. 51nod挑的部分5级题

    最近心情不好所以写代码来获得快落 4级题有点难做?然后就开始挑简单的5级题开始写 然后准备记录一些自己没有做出来 参考讨论区或者博客才做出来的题目 51nod_1189 阶乘分数 这个题参考了讨论区 ...

  4. Maven学习总结（7）——eclipse中使用Maven创建Web项目

    Maven学习总结(七)--eclipse中使用Maven创建Web项目 一.创建Web项目 1.1 选择建立Maven Project 选择File -> New ->Project,如 ...

  5. 使用MySQLMigrationToolkit快速将Oracle数据导入MySQL

    使用MySQL Migration Toolkit快速将Oracle数据导入MySQL 上来先说点废话 本人最近在学习一些数据库方面的知识,之前接触过Oracle和MySQL,最近又很流行MongoD ...

  6. [bzoj4282]慎二的随机数列_动态规划_贪心

    慎二的随机数列 bzoj-4282 题目大意:一个序列,序列上有一些数是给定的,而有一些位置上的数可以任意选择.问最长上升子序列. 注释:$1\le n\le 10^5$. 想法:结论:逢N必选.N是 ...

  7. Spring MVC-集成（Integration）-生成Excel示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_excel.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显示 ...

  8. BC ROUND 43# 03 HDU 5266

    弱啊弱啊,我用了扩展指令,然后大牛告诉我,只对VC++有用,对G++没用的..shit,三题就这样没了. 方法是使用ST在线算法,O(1)查询,然后用线段树维护..呃感觉这个好慢.看了大斌神的是用LC ...

  9. vim快速操作

    简明 VIM 练级攻略 vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会对这个编辑器失去兴趣的.下面的文章翻译自<Learn ...

  10. Linux 大规模请求server连接数相关设置

    一般一个大规模Linuxserver请求数可能是几十万上百万的情况.须要足够的连接数来使用,所以务必进行对应的设置. 默认的Linuxserver文件描写叙述符等打开最大是1024.用ulimit - ...