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);
    ?>
  • 相关阅读:
    第六篇:python高级之网络编程
    第五篇:python高级之面向对象高级
    sublime插件开发教程
    Metatable In Lua 浅尝辄止
    cocos2dx-lua绑定之代码编辑器
    sublime入门文章
    Sublime Text快捷键
    lua中文教程【高级知识】
    lua基本语法
    Lua 不是 C++
  • 原文地址:https://www.cnblogs.com/cmzhphp2017/p/7838168.html
Copyright © 2011-2022 走看看