• 三级联动


    //sanji.php
    
    <?php
    //连接数据库
    $conn = new mysqli('127.0.0.1','root','root','jingqu');
    
    $sql = "select * from tplay_province";
    $res = $conn->query($sql);
    $list = $res->fetch_all(MYSQLI_ASSOC);
    
    
    ?>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <select name="" id="sheng">
            <option value="">请选择省</option>
            <?php
                foreach($list as $val){
                    ?>
                    <option value="<?php echo $val['provinceid']?>"><?php echo $val['province']?></option>
                    <?php
                }
            
            ?>
        </select>
        <select name="" id="shi">
            <option value="">请选择市</option>
        </select>
        <select name="" id="qu">
            <option value="">请选择区</option>
        </select>
    </body>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $('#sheng').change(function(){
            var id = $(this).val();
            $.ajax({
                url:'sjld.php',
                data:{ids:id,type:1},
                type:'post',
                dataType:'json',
                success: function(res){
                    // alert(res);
                    // console.log(res.data);
                    // alert(1);
                    var htm = '<option value="">请选择市</option>';
    
                    // console.log()
                    for(var i=0;i<res.data.length;i++){
                        // console.log(res.data[i].city);
                        htm += '<option value="'+res.data[i].cityid+'">'+res.data[i].city+'</option>';
                    }
                    $('#shi').html(htm);
                    $('#qu').html('<option value="">请选择区</option>');
                },
                error: function(xhr, status, error) {
                    console.log(xhr);
                    console.log(status);
                    console.log(error);
                    }
            })
        });
        $('#shi').change(function(){
            var id = $(this).val();
            $.ajax({
                url:'sjld.php',
                data:{ids:id,type:2},
                type:'post',
                dataType:'json',
                success:function(res){
                    console.log(res);
                    var htm = '<option value="">请选择区</option>';
                    for(var i=0;i<res.data.length;i++){
                        htm += '<option value="'+res.data[i].areaid+'">'+res.data[i].area+'</option>';
                    }
                    $('#qu').html(htm);
                }
            })
        })
    </script>
    </html>
    复制代码
    复制代码
    //sjld.php
    
    <?php
    header("Content-Type: text/html; charset=utf-8");
    //连接数据库
    $conn = new mysqli('127.0.0.1','root','root','jingqu');
    
    $type = $_POST['type'];
    $id = $_POST['ids'];
    if($type == 1){
        $sql = "select * from tplay_city where fatherid = $id";
    }else{
        $sql = "select * from tplay_area where fatherID = $id";
    }
    
    $res = $conn->query($sql);
    $info = $res->fetch_all(MYSQLI_ASSOC);
    $arr = [];
    $arr['id'] = 1;
    $arr['data'] = $info;
    // var_dump($arr);
    
    echo json_encode($arr);
    
    ?>
  • 相关阅读:
    linux vps定时备份网站、数据库命令sh
    zencart批量表上传后 标题显示为网址 批量修改标题状态 SEO三要素
    robots.txt防止向黑客泄露网站的后台和隐私
    在网页中插入地图展示公司地址
    网站调用百度地图 根据地址查询经纬度
    jquery 未来元素事件示例 on() delegate() live()
    .htaccess A网站单页面301到B网站单页面
    linux批量设置部分文件与文件夹权限
    php中禁止单个ip与ip段访问的代码小结
    Spring整合ActiveMQ
  • 原文地址:https://www.cnblogs.com/1014852131qq/p/13594249.html
Copyright © 2020-2023  润新知