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-simple-captcha 使用
    RabbitMQ延迟队列(Python版)
    RabbitMQ CLI 管理工具 rabbitmqadmin(管理)
    Django Rest Framework组件:用户访问次数/频率限制BaseThrottle
    GitLab 持续集成
    Windows10搭建Spark+Python开发环境
    Python 应用自动化部署工具Fabirc
    Prometheus:Prometheus开发中间件Exporter
    qs 和 headers: { "content-type": "application/x-www-form-urlencoded" }, data: qs.stringify(data) 必须同时设置
  • 原文地址:https://www.cnblogs.com/cmzhphp2017/p/7838168.html
Copyright © 2011-2022 走看看