zoukankan html css js c++ java

PHP--三级联动

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

?>

查看全文

相关阅读:
IntelliJ IDEA错误：源值1.5已过时，将在未来所有版本中删除
 AcWing 311. 月之谜数位dp
AcWing 306. 杰拉尔德和巨型象棋计数类DP
AcWing 296. 清理班次2 线段树优化dp
luogu P3052 [USACO12MAR]Cows in a Skyscraper G
luogu P5664 Emiya 家今天的饭容斥+dp
AcWing 289. 环路运输滑动窗口单调队列优化
 AcWing 288. 休息时间滚动数组+分类讨论
 AcWing 287. 积蓄程度树形dp，换根
 luogu P3842 [TJOI2007]线段线性dp

原文地址：https://www.cnblogs.com/1500418882qqcom/p/13577928.html