使用ajax三级联动添加数据并显示

以下是一个使用AJAX实现三级联动的例子：

HTML部分：

<select id="province">
    <option value="">请选择省份</option>
</select>
<select id="city">
    <option value="">请选择城市</option>
</select>
<select id="district">
    <option value="">请选择区县</option>
</select>

JavaScript部分：

// 获取省份数据
function getProvince() {
    $.ajax({
        url: 'get_province.php', // 后端接口地址，返回省份数据
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            // 清空城市和区县下拉框
            $("#city").empty();
            $("#district").empty();
            // 添加省份选项
            $.each(data, function(index, province) {
                $("#province").append('<option value="' + province.id + '">' + province.name + '</option>');
            });
        }
    });
}

// 获取城市数据
function getCity(provinceId) {
    $.ajax({
        url: 'get_city.php', // 后端接口地址，返回城市数据
        type: 'GET',
        data: { provinceId: provinceId },
        dataType: 'json',
        success: function(data) {
            // 清空区县下拉框
            $("#district").empty();
            // 添加城市选项
            $.each(data, function(index, city) {
                $("#city").append('<option value="' + city.id + '">' + city.name + '</option>');
            });
        }
    });
}

// 获取区县数据
function getDistrict(cityId) {
    $.ajax({
        url: 'get_district.php', // 后端接口地址，返回区县数据
        type: 'GET',
        data: { cityId: cityId },
        dataType: 'json',
        success: function(data) {
            // 添加区县选项
            $.each(data, function(index, district) {
                $("#district").append('<option value="' + district.id + '">' + district.name + '</option>');
            });
        }
    });
}

// 页面加载完成后获取省份数据
$(document).ready(function() {
    getProvince();
});

// 省份下拉框改变时获取对应的城市数据
$("#province").change(function() {
    var provinceId = $(this).val();
    if (provinceId != '') {
        getCity(provinceId);
    } else {
        $("#city").empty();
        $("#district").empty();
    }
});

// 城市下拉框改变时获取对应的区县数据
$("#city").change(function() {
    var cityId = $(this).val();
    if (cityId != '') {
        getDistrict(cityId);
    } else {
        $("#district").empty();
    }
});

PHP部分（get_province.php）：

<?php
// 返回省份数据
$provinces = array(
    array('id' => 1, 'name' => '北京'),
    array('id' => 2, 'name' => '上海'),
    array('id' => 3, 'name' => '广东')
);
echo json_encode($provinces);
?>

PHP部分（get_city.php）：

<?php
// 获取省份ID
$provinceId = $_GET['provinceId'];

// 返回城市数据
$cities = array();
if ($provinceId == 1) {
    $cities = array(
        array('id' => 11, 'name' => '北京市')
    );
} else if ($provinceId == 2) {
    $cities = array(
        array('id' => 21, 'name' => '上海市')
    );
} else if ($provinceId == 3) {
    $cities = array(
        array('id' => 31, 'name' => '广州市'),
        array('id' => 32, 'name' => '深圳市')
    );
}
echo json_encode($cities);
?>

PHP部分（get_district.php）：

<?php
// 获取城市ID
$cityId = $_GET['cityId'];

// 返回区县数据
$districts = array();
if ($cityId == 11) {
    $districts = array(
        array('id' => 111, 'name' => '东城区'),
        array('id' => 112, 'name' => '西城区')
    );
} else if ($cityId == 21) {
    $districts = array(
        array('id' => 211, 'name' => '黄浦区'),
        array('id' => 212, 'name' => '徐汇区')
    );
} else if ($cityId == 31) {
    $districts = array(
        array('id' => 311, 'name' => '天河区'),
        array('id' => 312, 'name' => '越秀区')
    );
} else if ($cityId == 32) {
    $districts = array(
        array('id' => 321, 'name' => '福田区'),
        array('id' => 322, 'name' => '南山区')
    );
}
echo json_encode($districts);
?>

以上代码实现了一个简单的三级联动，当选择省份时，会根据省份ID获取对应的城市数据，再根据城市ID获取对应的区县数据，并将数据添加到对应的下拉框中