php+jquery实现三级联动前后端代码

最新推荐文章于 2024-08-20 11:45:38 发布

gznyc

最新推荐文章于 2024-08-20 11:45:38 发布

阅读量236

点赞数 1

文章标签： php javascript jquery

本文链接：https://blog.csdn.net/gznyc/article/details/139307500

版权

PHP三级联动通常用于地区选择，例如省市区/县。以下是一个简单的PHP三级联动的实现示例：

<!DOCTYPE html>
<html>
<head>
    <title>三级联动示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
省份：
<select name="province" id="province">
    <option value="">请选择省份</option>
    <?php
    foreach (getProvinceList() as $province) {
        echo "<option value='{$province}'>{$province}</option>";
    }
    ?>
</select>
 
城市：
<select name="city" id="city">
    <option value="">请选择城市</option>
</select>
 
区/县：
<select name="district" id="district">
    <option value="">请选择区/县</option>
</select>
 
<script>
$(document).ready(function() {
    $('#province').change(function() {
        var province = $(this).val();
        if (province) {
            $.ajax({
                url: 'get_cities.php',
                type: 'post',
                data: { province: province },
                success: function(response) {
                    var cities = JSON.parse(response);
                    var html = '<option value="">请选择城市</option>';
                    cities.forEach(function(city) {
                        html += '<option value="' + city + '">' + city + '</option>';
                    });
                    $('#city').html(html);
                }
            });
        } else {
            $('#city').html('<option value="">请选择城市</option>');
            $('#district').html('<option value="">请选择区/县</option>');
        }
    });
 
    $('#city').change(function() {
        var city = $(this).val();
        if (city) {
            $.ajax({
                url: 'get_districts.php',
                type: 'post',
                data: { city: city },
                success: function(response) {
                    var districts = JSON.parse(response);
                    var html = '<option value="">请选择区/县</option>';
                    districts.forEach(function(district) {
                        html += '<option value="' + district + '">' + district + '</option>';
                    });
                    $('#district').html(html);
                }
            });
        } else {
            $('#district').html('<option value="">请选择区/县</option>');
        }
    });
});
</script>
 
</body>
</html>
 
<?php
function getProvinceList() {
    // 假设有一个省份列表数组
    return [
        '省份1',
        '省份2',
        // ...
    ];
}
?>
 
<!-- get_cities.php -->
<?php
$province = $_POST['province'];
// 根据省份获取城市列表
$cities = []; // 假设获取到的城市列表
echo json_encode($cities);
?>
 
<!-- get_districts.php -->
<?php
$city = $_POST['city'];
// 根据城市获取区/县列表
$districts = []; // 假设获取到的区/县列表
echo json_encode($districts);
?>

在这个示例中，我们使用了jQuery来处理前端的交互，并通过AJAX向后端发送请求来获取下级列表。后端get_cities.php和get_districts.php是模拟的PHP脚本，它们根据前端传递的数据返回对应的城市或区/县列表。在实际应用中，你需要替换获取列表的逻辑，使其从数据库或其他数据源中