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);
    ?>
  • 相关阅读:
    django基础知识之分页:
    django基础知识之后台管理Admin站点:
    django基础知识之上传图片:
    django基础知识之管理静态文件css,js,images:
    《机器学习》周志华 习题答案5.5
    《机器学习》周志华 习题答案3.6
    《机器学习》周志华 习题答案3.5
    PCA和LDA降维的比较
    Anaconda安装更新库
    《机器学习》周志华 习题答案3.3
  • 原文地址:https://www.cnblogs.com/cmzhphp2017/p/7838168.html
Copyright © 2011-2022 走看看