Ajax 三级联动实现：省份、城市、区域选择

'<select id='province'><option value=''>选择省份<select id='city'><option value=''>选择城市<select id='district'><option value=''>选择区域'\n// 获取省份数据\nfunction getProvinces() {\n return new Promise(function(resolve, reject) {\n // 发送Ajax请求获取省份数据\n // 假设省份数据以JSON格式返回\n // 替换为实际的接口地址\n var url = '/api/provinces';\n var xhr = new XMLHttpRequest();\n xhr.open('GET', url);\n xhr.onload = function() {\n if (xhr.status === 200) {\n var provinces = JSON.parse(xhr.responseText);\n resolve(provinces);\n } else {\n reject(xhr.statusText);\n }\n };\n xhr.onerror = function() {\n reject(xhr.statusText);\n };\n xhr.send();\n });\n}\n// 获取城市数据\nfunction getCities(provinceId) {\n return new Promise(function(resolve, reject) {\n // 发送Ajax请求获取城市数据\n // 假设城市数据以JSON格式返回\n // 替换为实际的接口地址\n var url = '/api/cities?provinceId=' + provinceId;\n var xhr = new XMLHttpRequest();\n xhr.open('GET', url);\n xhr.onload = function() {\n if (xhr.status === 200) {\n var cities = JSON.parse(xhr.responseText);\n resolve(cities);\n } else {\n reject(xhr.statusText);\n }\n };\n xhr.onerror = function() {\n reject(xhr.statusText);\n };\n xhr.send();\n });\n}\n// 获取区域数据\nfunction getDistricts(cityId) {\n return new Promise(function(resolve, reject) {\n // 发送Ajax请求获取区域数据\n // 假设区域数据以JSON格式返回\n // 替换为实际的接口地址\n var url = '/api/districts?cityId=' + cityId;\n var xhr = new XMLHttpRequest();\n xhr.open('GET', url);\n xhr.onload = function() {\n if (xhr.status === 200) {\n var districts = JSON.parse(xhr.responseText);\n resolve(districts);\n } else {\n reject(xhr.statusText);\n }\n };\n xhr.onerror = function() {\n reject(xhr.statusText);\n };\n xhr.send();\n });\n}\n// 初始化省份下拉列表\nfunction initProvinces() {\n getProvinces().then(function(provinces) {\n var provinceSelect = document.getElementById('province');\n provinces.forEach(function(province) {\n var option = document.createElement('option');\n option.value = province.id;\n option.textContent = province.name;\n provinceSelect.appendChild(option);\n });\n }).catch(function(error) {\n console.log(error);\n });\n}\n// 初始化城市下拉列表\nfunction initCities(provinceId) {\n var citySelect = document.getElementById('city');\n citySelect.innerHTML = '';\n if (provinceId) {\n getCities(provinceId).then(function(cities) {\n cities.forEach(function(city) {\n var option = document.createElement('option');\n option.value = city.id;\n option.textContent = city.name;\n citySelect.appendChild(option);\n });\n }).catch(function(error) {\n console.log(error);\n });\n }\n}\n// 初始化区域下拉列表\nfunction initDistricts(cityId) {\n var districtSelect = document.getElementById('district');\n districtSelect.innerHTML = '';\n if (cityId) {\n getDistricts(cityId).then(function(districts) {\n districts.forEach(function(district) {\n var option = document.createElement('option');\n option.value = district.id;\n option.textContent = district.name;\n districtSelect.appendChild(option);\n });\n }).catch(function(error) {\n console.log(error);\n });\n }\n}\n// 监听省份下拉列表的change事件\ndocument.getElementById('province').addEventListener('change', function() {\n var provinceId = this.value;\n initCities(provinceId);\n initDistricts();\n});\n// 监听城市下拉列表的change事件\ndocument.getElementById('city').addEventListener('change', function() {\n var cityId = this.value;\n initDistricts(cityId);\n});\n// 初始化省份下拉列表\ninitProvinces();\n