三级联动这个功能我们日常中很常见，常见的应用场景就比如我们的收货地址。就是这样的一个效果.让用户在选择一级选项后，二级选项根据一级选择更新，三级选项再依据二级选择进行相应变化。
当用户选择了一个省份后，城市下拉框中会自动显示该省份对应的所有城市；接着，当用户选择了一个城市后，区县下拉框又会动态展示该城市所包含的各个区县。这种交互方式不仅能提高用户输入信息的准确性，还能大大提升用户体验，减少错误输入的可能性。
实现思路
- 数据准备 ：使用 JSON 格式存储地区数据，包括省份、城市及其对应的区县信息。通过
XMLHttpRequest对象从外部 JSON 文件中获取这些数据。 - HTML 结构搭建 ：创建三个
<select>元素，分别用于显示省份、城市和区县的选项。初始时，城市和区县的<select>元素设置为禁用状态。 - JavaScript 逻辑处理 ：
- 数据获取与渲染：获取数据后，将省份数据渲染到第一个
<select>元素中。 - 一级联动：为省份
<select>元素绑定onchange事件，当用户选择一个省份时，根据所选省份更新城市<select>元素的选项，并启用该元素，同时禁用区县<select>元素并清空其选项。 - 二级联动：为城市
<select>元素绑定onchange事件，当用户选择一个城市时，根据所选城市更新区县<select>元素的选项，并启用该元素。 - 最终选择处理：为区县
<select>元素绑定onchange事件，当用户选择一个区县后，通过弹出提示框等方式展示用户所选择的完整地区信息。
- 数据获取与渲染：获取数据后，将省份数据渲染到第一个
html：
html
<select name="" id="province" onchange="province()">
<option value="">选择所在省份</option>
</select>
<select name="" id="city" disabled onchange="citys()">
<option value="">请先选择省份</option>
</select>
<select name="" id="area" disabled>
<option value="">请先选择省份</option>
</select>这段 HTML 代码创建了三个 <select> 元素，分别为 province（省份）、city（城市）和 area（区县）。province 元素初始时包含一个提示选项，city 和 area 元素则设置为禁用状态，并包含相应的提示选项。
js：
javascript
let pro = document.getElementById('province');
let city = document.getElementById('city');
let area = document.getElementById('area');
let data;
let xhr = new XMLHttpRequest();
// open（请求类型是get，请求地址：文件位置写的是json文件，请求方式是true。表示是异步
xhr.open('get', 'js/Three_stage_linkage.json', true);
// 接着发送请求
xhr.send();
// 该方法可以定义响应执行函数，当 readyState 属性发
// 生变化时会自动调用该方法。
xhr.onreadystatechange = function() {
// ready是交互流程。5个阶段，if判断中意思是
// 交互流程是否达到第五个阶段并且状态等于200请求成功
if (xhr.readyState == 4 && xhr.status == 200) {
// 响应文本（返回的数据）
let text = xhr.responseText;
// 把返回的json数据转换，并赋值到data变量
data = JSON.parse(text);
console.log(data);
reader(data);
}
};
// 渲染函数，渲染第一个的下拉框内容数据
function reader(data) {
// 拼接字符串，省份数据
let str = '';
str=`<option value="" selected disabled>请选择你所在的省份</option>`;
for (i = 0; i < data.length; i++) {
str += `
<option value="${i}">${data[i].name}</option>
`;
}
// 最后输出到省份中
pro.innerHTML = str;
}
// 绑定第一个下拉框onchange事件
function province() {
let val=pro.value;
area.setAttribute('disabled','disabled');
let strs=`<option value="" selected disabled>请先选择城市</option>`;
area.innerHTML=strs;
city.removeAttribute('disabled');
let str = '';
str=`<option value="" selected disabled>选择所在城市</option>`;
console.log(data[val]);
for (let i = 0; i < data[val].cities.length; i++) {
str += `
<option value="${i}">${data[val].cities[i].name}</option>
`;
}
city.innerHTML = str;
}
function citys(){
let pro_val=pro.value;
let city_val=city.value;
if(city_val==''){
let strs=`<option value="" selected disabled>请先选择城市</option>`;
area.innerHTML=strs;
}
area.removeAttribute('disabled');
let str='';
str=`<option value="" selected disabled>选择所在区县</option>`;
for(let i=0;i<data[pro_val].cities[city_val].districts.length;i++){
str += `
<option value="${i}">${data[pro_val].cities[city_val].districts[i]}</option>
`;
}
area.innerHTML=str;
}
area.onchange=function(){
let pro_val=pro.value;
let city_val=city.value;
let area_val=area.value;
alert(data[pro_val].name+data[pro_val].cities[city_val].name+data[pro_val].cities[city_val].districts[area_val]);
}- 数据获取 ：通过
XMLHttpRequest对象从js/Three_stage_linkage.json文件中获取地区数据。当数据获取成功后，将数据解析为 JavaScript 对象并存储在data变量中，然后调用reader函数渲染省份选项。 reader函数 ：遍历获取到的省份数据，生成包含省份选项的 HTML 字符串，并将其赋值给pro.innerHTML，从而将省份选项显示在province<select>元素中。province函数 ：当用户选择一个省份时（省份选项发生变化），该函数被触发。然后禁用area<select>元素并清空其选项，然后启用city<select>元素。接着，根据所选省份，遍历该省份对应的城市数据，生成城市选项的 HTML 字符串，并将其赋值给city.innerHTML，实现城市选项的更新。citys函数 ：当用户选择一个城市时，该函数被调用。如果城市选项为空，先清空area<select>元素的选项并显示提示。然后启用area<select>元素，根据所选省份和城市，遍历该城市对应的区县数据，生成区县选项的 HTML 字符串，并将其赋值给area.innerHTML，实现区县选项的更新。
- 区县选择处理 ：为
area<select>元素绑定onchange事件，当用户选择一个区县后，获取所选的省份、城市和区县的值，通过alert弹出提示框，展示完整的地区信息。
通过以上代码，我们成功实现了一个地区选择的三级联动功能。有任何问题可以在评论区留言哦~