三级联动 

//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);

?>
posted @ 2020-09-01 09:08  孙旋  阅读(95)  评论(0)  编辑  收藏  举报