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

    处理页面代码

    <?php
    /**
     * 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);
  • 相关阅读:
    NGINX反向代理与负载均衡
    kubernetes介绍
    Linux下yum出现no module named pycurl 解决办法
    MySQL中间件介绍
    Memcached做Tomcat的session共享
    MySQL高负载优化
    Centos下安装Tomcat7
    浅谈世界坐标系,相机坐标系,图像坐标系,像素坐标系的关系
    相机标定方法之初探
    ubuntu18.04安装kalibr相机标定工具
  • 原文地址:https://www.cnblogs.com/dej-11/p/7753176.html
Copyright © 2011-2022 走看看