js将mysql结果组成一个联级菜单

由于JavaScript是一门客户端语言，需要通过服务器端语言（如PHP、ASP.NET等）来获取MySQL数据，因此以下代码仅为示例，需要结合服务器端语言使用。

HTML部分：

<select id="province" onchange="loadCity()">
    <option value="">请选择省份</option>
</select>

<select id="city" onchange="loadDistrict()">
    <option value="">请选择城市</option>
</select>

<select id="district">
    <option value="">请选择区县</option>
</select>

JavaScript部分：

function loadProvince() {
    var provinceSelect = document.getElementById("province");
    // 清空下拉框
    provinceSelect.options.length = 0;
    // 添加默认选项
    provinceSelect.options.add(new Option("请选择省份", ""));
    // 获取省份数据，此处省略ajax请求过程
    var data = [
        {id: 1, name: "北京"},
        {id: 2, name: "上海"},
        {id: 3, name: "广东"}
    ];
    // 添加省份选项
    for (var i = 0; i < data.length; i++) {
        provinceSelect.options.add(new Option(data[i].name, data[i].id));
    }
}

function loadCity() {
    var citySelect = document.getElementById("city");
    // 清空下拉框
    citySelect.options.length = 0;
    // 添加默认选项
    citySelect.options.add(new Option("请选择城市", ""));
    // 获取省份ID
    var provinceId = document.getElementById("province").value;
    if (provinceId != "") {
        // 获取城市数据，此处省略ajax请求过程
        var data = [
            {id: 101, name: "北京市", provinceId: 1},
            {id: 102, name: "上海市", provinceId: 2},
            {id: 103, name: "广州市", provinceId: 3},
            {id: 104, name: "深圳市", provinceId: 3},
            {id: 105, name: "珠海市", provinceId: 3}
        ];
        // 添加城市选项
        for (var i = 0; i < data.length; i++) {
            if (data[i].provinceId == provinceId) {
                citySelect.options.add(new Option(data[i].name, data[i].id));
            }
        }
    }
}

function loadDistrict() {
    var districtSelect = document.getElementById("district");
    // 清空下拉框
    districtSelect.options.length = 0;
    // 添加默认选项
    districtSelect.options.add(new Option("请选择区县", ""));
    // 获取城市ID
    var cityId = document.getElementById("city").value;
    if (cityId != "") {
        // 获取区县数据，此处省略ajax请求过程
        var data = [
            {id: 201, name: "东城区", cityId: 101},
            {id: 202, name: "西城区", cityId: 101},
            {id: 203, name: "黄浦区", cityId: 102},
            {id: 204, name: "徐汇区", cityId: 102},
            {id: 205, name: "天河区", cityId: 103},
            {id: 206, name: "越秀区", cityId: 103},
            {id: 207, name: "南山区", cityId: 104},
            {id: 208, name: "福田区", cityId: 104},
            {id: 209, name: "香洲区", cityId: 105},
            {id: 210, name: "斗门区", cityId: 105}
        ];
        // 添加区县选项
        for (var i = 0; i < data.length; i++) {
            if (data[i].cityId == cityId) {
                districtSelect.options.add(new Option(data[i].name, data[i].id));
            }
        }
    }
}

// 初始化
loadProvince();