• 三级联动下拉列表——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);
    ?>
  • 相关阅读:
    go多种uuid生成方式
    go访问mysql基本语法
    go实现分布式唯一ID-snowflake(雪花算法)
    指定时间生成cron表达式
    zookeeper注册与发现
    短地址服务(二)
    java-redis
    短地址服务(一)
    cron表达式详解
    以后本blog所有内容全部转移,并在自建blog更新
  • 原文地址:https://www.cnblogs.com/cmzhphp2017/p/7838168.html
Copyright © 2020-2023  润新知