zoukankan      html  css  js  c++  java
  • 0621jQuery练习:三级联动

    HTML部分============================================================================================

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <script src="../bootstrap/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <title>Document</title>
    </head>
    <body>
        <div class="sanji"></div>
    </body>
    </html>
    <script type="text/javascript">
    //    入口函数
        $(document).ready(function(){
            var attr = "<select id = 'sheng'></select><select id = 'shi'></select><select id = 'qu'></select>";
            $(".sanji").html(attr);
            sheng();
    //        通过下拉菜单#sheng的change事件触发函数shi()和qu()
            $("#sheng").change(function(){
                shi();
                qu();
            });
            $("#shi").change(function(){
                qu();
            })
        })
        function sheng(){
    //        省的编号都为0,没有父级
            var myid = "0";
            var shengstr = "";
            $.ajax({
                type:"post",
                url:"sjldcl.php",
                async:true,
                data:{
                    myid:myid
                },
                dataType:"json",
                success:function(data){
                    for (var i =0;i<data.length;i++) {
                        shengstr +="<option value = '"+data[i][0]+"'>"+data[i][1]+"</option>";
                    }
                    $("#sheng").html(shengstr);
    //                在此处调用函数shi()是因为执行完函数sheng()才可获得#sheng元素的value值
    //                如果想把函数shi()放到入口函数中,则需要把$.ajax的async改为false
    //                执行完函数sheng()获得#sheng的value值后再执行函数shi()
                    shi();
                }
            });
        }
        function shi(){
    //        获取#sheng的value值,为#shi的编号
            var myid = $("#sheng").val();
            var shistr = "";
            $.ajax({
                type:"post",
                url:"sjldcl.php",
                async:true,
                data:{
                    myid:myid
                },
                dataType:"json",
                success:function(data){
                    for (var i =0;i<data.length;i++) {
                        shistr +="<option value = '"+data[i][0]+"'>"+data[i][1]+"</option>";
                    }
                    $("#shi").html(shistr);
                    qu();
                }
            });
        }
        function qu(){
    //        获取#shi的value值,为#qu的编号
            var myid = $("#shi").val();
            var qustr = "";
            $.ajax({
                type:"post",
                url:"sjldcl.php",
                async:true,
                data:{
                    myid:myid
                },
                dataType:"json",
                success:function(data){
                    for (var i =0;i<data.length;i++) {
                        qustr +="<option value = '"+data[i][0]+"'>"+data[i][1]+"</option>";
                    }
                    $("#qu").html(qustr);
                }
            });
        }
    </script>

    HTML部分^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    PHP部分============================================================================================

    <?php
        $conn = new mysqli("localhost","root","","ceshi2");
        $conn->connect_error?die():"";
        $myid = $_POST['myid'];
        $sql = "select * from dt_area where area_parent_id = {$myid}";
        $resule = $conn->query($sql);
        $attr = $resule->fetch_all();
        echo json_encode($attr);
    ?>

    PHP部分^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  • 相关阅读:
    Java自定义加密字符串算法题目
    约瑟夫环C语言实现
    Java实现字符串形式大数相加
    Python打印乘法表
    Andorid中HandlerThread使用小记
    Ubuntu下C++使用icu库检测字符编码
    小记
    胆大妄为【DDWW】实验十 团队作业6:团队项目用户验收&Beta冲刺
    胆大妄为【DDWW】 【Beta】Scrum meeting 4
    胆大妄为【DDWW】 【Beta】Scrum meeting 3
  • 原文地址:https://www.cnblogs.com/zhangbaozhong/p/9210793.html
Copyright © 2011-2022 走看看