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);
  • 相关阅读:
    有爱,有期待——开启囤货模式(一)
    我们都爱你,悠悠球少年
    三月随笔——漫长的等待
    奢侈的休闲度假时光——带着小样儿去三亚(三)
    这个夏天,飞到北纬18°去玩海——带着小样儿去三亚(二)
    一场说走就走的旅程——带着小样儿去三亚(一)
    获取URL的参数-详解如何获取(自己写的,实测有效)
    背景图自适应
    百家姓
    判断是手机端还是PC端的代码
  • 原文地址:https://www.cnblogs.com/little-rock/p/8056210.html
Copyright © 2011-2022 走看看