基于ajax实现三级级联下拉菜单

三级联动下拉菜单是一种常见的交互式界面，通常用于选择省市区、商品分类等场景。下面是一个基于 Ajax 技术实现的三级联动下拉菜单的示例代码：

HTML 代码：

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

JavaScript 代码：

function getCity() {
    var xhr = new XMLHttpRequest();
    var province = document.getElementById("province").value;
    xhr.open("GET", "/getCity?province=" + province, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var cityList = JSON.parse(xhr.responseText);
            var citySelect = document.getElementById("city");
            citySelect.options.length = 0; // 清空原有选项
            citySelect.options.add(new Option("请选择城市", "")); // 添加默认选项
            for (var i = 0; i < cityList.length; i++) {
                citySelect.options.add(new Option(cityList[i], cityList[i]));
            }
        }
    };
    xhr.send();
}

function getDistrict() {
    var xhr = new XMLHttpRequest();
    var province = document.getElementById("province").value;
    var city = document.getElementById("city").value;
    xhr.open("GET", "/getDistrict?province=" + province + "&city=" + city, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var districtList = JSON.parse(xhr.responseText);
            var districtSelect = document.getElementById("district");
            districtSelect.options.length = 0; // 清空原有选项
            districtSelect.options.add(new Option("请选择区县", "")); // 添加默认选项
            for (var i = 0; i < districtList.length; i++) {
                districtSelect.options.add(new Option(districtList[i], districtList[i]));
            }
        }
    };
    xhr.send();
}

在上面的代码中，使用了 XMLHttpRequest 对象发送 GET 请求获取城市和区县的数据，并通过 JSON.parse() 方法将返回的 JSON 数据解析为 JavaScript 对象。然后使用 JavaScript 动态创建 option 元素并添加到 select 元素中。

需要注意的是，在省份变化时，应该清空城市和区县的选项并添加默认选项，以保证用户正确选择。