码迷,mamicode.com
首页 > 其他好文 > 详细

三级联动

时间:2020-09-12 21:52:32      阅读:58      评论:0      收藏:0      [点我收藏+]

标签:HERE   erro   body   device   where   ice   OLE   code   mysql   

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

?>

三级联动

标签:HERE   erro   body   device   where   ice   OLE   code   mysql   

原文地址:https://www.cnblogs.com/1014852131qq/p/13594249.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!