JS省市区三级联动查询示例代码（城市查询、地区查询）
文章目录
- 代码
- 效果
代码
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><!-- 确保IE浏览器使用最新的渲染引擎 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 设置viewport以确保页面在移动设备上正确显示 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Promise链式调用示例</title><style>body {font-family: Arial, sans-serif;padding: 20px;max-width: 800px;margin: 0 auto;}select {padding: 8px;font-size: 16px;border-radius: 4px;border: 1px solid #ddd;width: 100%;margin-top: 5px;}.area-container {display: flex;flex-direction: column;gap: 15px;margin-top: 20px;}.area-item {padding: 10px;border: 1px solid #ddd;border-radius: 4px;}label {font-weight: bold;}.log {margin-top: 20px;padding: 15px;background-color: #f8f9fa;border: 1px solid #ddd;border-radius: 4px;font-family: monospace;white-space: pre-wrap;max-height: 300px;overflow: auto;}</style>
</head><body><h2>省市区三级联动查询示例</h2><div class="area-container"><div class="area-item"><label for="province">省份:</label><select id="province"></select></div><div class="area-item"><label for="city">城市:</label><select id="city" disabled></select></div><div class="area-item"><label for="area">地区:</label><select id="area" disabled></select></div></div><div class="log" id="log">日志输出：</div><!-- 引入axios库 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>// 添加日志输出函数function log(message) {console.log(message);const logElement = document.getElementById('log');logElement.textContent += '\n' + message;}// DOM 元素const provinceSelect = document.getElementById('province');const citySelect = document.getElementById('city');const areaSelect = document.getElementById('area');// 页面加载完成后，获取省份列表window.addEventListener('DOMContentLoaded', () => {log('页面加载完成，开始请求省份列表...');loadProvinces();});// 加载省份列表function loadProvinces() {// 清空所有下拉菜单provinceSelect.innerHTML = '<option value="">请选择省份</option>';citySelect.innerHTML = '<option value="">请选择城市</option>';areaSelect.innerHTML = '<option value="">请选择地区</option>';citySelect.disabled = true;areaSelect.disabled = true;// 发送请求获取省份列表axios({ url: 'http://hmajax.itheima.net/api/province' }).then(result => {log('获取省份列表成功');log(`省份数据: ${JSON.stringify(result.data.list)}`);// 填充省份下拉菜单result.data.list.forEach(province => {const option = document.createElement('option');option.value = province;option.textContent = province;provinceSelect.appendChild(option);});}).catch(error => {log(`获取省份列表失败: ${error.message}`);});}// 省份选择变化时，加载对应的城市列表provinceSelect.addEventListener('change', function() {const pname = this.value;if (!pname) {// 如果没有选择省份，清空并禁用城市和地区下拉菜单citySelect.innerHTML = '<option value="">请选择城市</option>';areaSelect.innerHTML = '<option value="">请选择地区</option>';citySelect.disabled = true;areaSelect.disabled = true;return;}log(`省份已选择: ${pname}，开始请求城市列表...`);// 发送请求获取城市列表axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } }).then(result => {log('获取城市列表成功');log(`城市数据: ${JSON.stringify(result.data.list)}`);// 清空并填充城市下拉菜单citySelect.innerHTML = '<option value="">请选择城市</option>';result.data.list.forEach(city => {const option = document.createElement('option');option.value = city;option.textContent = city;citySelect.appendChild(option);});// 启用城市下拉菜单citySelect.disabled = false;// 清空并禁用地区下拉菜单areaSelect.innerHTML = '<option value="">请选择地区</option>';areaSelect.disabled = true;}).catch(error => {log(`获取城市列表失败: ${error.message}`);});});// 城市选择变化时，加载对应的地区列表citySelect.addEventListener('change', function() {const cname = this.value;const pname = provinceSelect.value;if (!cname) {// 如果没有选择城市，清空并禁用地区下拉菜单areaSelect.innerHTML = '<option value="">请选择地区</option>';areaSelect.disabled = true;return;}log(`城市已选择: ${cname}，开始请求地区列表...`);// 发送请求获取地区列表axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } }).then(result => {log('获取地区列表成功');log(`地区数据: ${JSON.stringify(result.data.list)}`);// 清空并填充地区下拉菜单areaSelect.innerHTML = '<option value="">请选择地区</option>';result.data.list.forEach(area => {const option = document.createElement('option');option.value = area;option.textContent = area;areaSelect.appendChild(option);});// 启用地区下拉菜单areaSelect.disabled = false;}).catch(error => {log(`获取地区列表失败: ${error.message}`);});});</script>
</body></html>
效果
