纯js实现三级联动

基础概念：三级联动通常指的是在网页或应用中，当用户选择一个选项时，会依次触发下级选项的更新，形成一种链式的选择关系。例如，在选择国家、省份和城市时，先选择国家，然后省份选项会根据所选国家自动更新，再选择省份后，城市选项也会相应更新。

相关优势：

提高用户体验：用户只需按照顺序选择，无需手动搜索或输入，减少了操作的复杂性。
数据准确性：通过预定义的数据结构，可以确保用户选择的数据是准确和有效的。
界面简洁：减少了不必要的输入框和选项，使界面更加简洁明了。

类型：三级联动可以根据数据来源和应用场景的不同而有所变化，常见的有基于静态数据的联动、基于API动态获取数据的联动等。

应用场景：

地址选择：国家、省份、城市。
商品分类：大类、小类、具体商品。
时间选择：年、月、日。

实现纯JS实现三级联动的简要步骤：

准备数据结构：通常可以使用嵌套的JSON对象来表示三级联动的数据。
创建HTML结构：包括三个<select>元素，分别对应三级选项。
编写JavaScript逻辑：
- 监听第一级<select>的change事件，根据选择更新第二级的选项。
- 监听第二级<select>的change事件，根据选择更新第三级的选项。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动示例</title>
</head>
<body>

<select id="level1">
<option value="">请选择</option>
<!-- 第一级选项将通过JavaScript动态生成 -->
</select>

<select id="level2" disabled>
<option value="">请选择</option>
<!-- 第二级选项将通过JavaScript动态生成 -->
</select>

<select id="level3" disabled>
<option value="">请选择</option>
<!-- 第三级选项将通过JavaScript动态生成 -->
</select>

<script>
const data = {
"中国": {
"广东": ["广州", "深圳"],
"浙江": ["杭州", "宁波"]
},
"美国": {
"加利福尼亚": ["洛杉矶", "旧金山"],
"纽约州": ["纽约市", "布法罗"]
}
};

const level1Select = document.getElementById('level1');
const level2Select = document.getElementById('level2');
const level3Select = document.getElementById('level3');

// 初始化第一级选项
for (let country in data) {
let option = document.createElement('option');
option.value = country;
option.text = country;
level1Select.appendChild(option);
}

// 监听第一级选项变化
level1Select.addEventListener('change', function() {
let country = this.value;
level2Select.innerHTML = '<option value="">请选择</option>';
level3Select.innerHTML = '<option value="">请选择</option>';
level3Select.disabled = true;

if (country) {
for (let province in data[country]) {
let option = document.createElement('option');
option.value = province;
option.text = province;
level2Select.appendChild(option);
}
level2Select.disabled = false;
}
});

// 监听第二级选项变化
level2Select.addEventListener('change', function() {
let country = level1Select.value;
let province = this.value;
level3Select.innerHTML = '<option value="">请选择</option>';

if (province) {
data[country][province].forEach(city => {
let option = document.createElement('option');
option.value = city;
option.text = city;
level3Select.appendChild(option);
});
level3Select.disabled = false;
}
});
</script>

</body>
</html>

可能遇到的问题及解决方法：