zoukankan      html  css  js  c++  java
  • 三级联动下拉列表——php 、Ajax

    主页面:
    <!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);
    ?>
  • 相关阅读:
    动图+源码,演示 Java 中常用数据结构执行过程及原理
    16 个超级实用的 Java 工具类
    图解 Java 垃圾回收机制,写得非常好!
    一些值得收藏的开源框架
    JVM 发生内存溢出的 8 种原因、及解决办法
    VC的function类说明 -- 继续
    引用文章 如何在lambda中引入递归调用
    VC中function函数解析
    folly无锁队列正确性说明
    C++ Programming Language中的Calculator源代码
  • 原文地址:https://www.cnblogs.com/cmzhphp2017/p/7838168.html
Copyright © 2011-2022 走看看