zoukankan      html  css  js  c++  java
  • AJAX三级联动写法

    新建主页面,如下

    <!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>")
                        }
                    }
                })
            })
        })

    建立处理页面,如下

    /**
     * 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);
  • 相关阅读:
    洛谷P1261 服务器储存信息问题
    洛谷P2110 欢总喊楼记
    洛谷P2482 [SDOI2010]猪国杀
    洛谷P2756 飞行员配对方案问题
    洛谷P2763 试题库问题
    洛谷P2774 方格取数问题
    Huffman编码
    SA后缀数组
    KMP
    LCA
  • 原文地址:https://www.cnblogs.com/little-rock/p/8056210.html
Copyright © 2011-2022 走看看