原生js实现级联选择
时间: 2023-02-06 07:59:20 浏览: 85
好的,下面是用原生 JavaScript 实现级联选择的示例代码:
```
<!-- HTML 结构 -->
<form>
<label for="country">国家:</label><br>
<select id="country" name="country">
<option value="">请选择</option>
<option value="China">中国</option>
<option value="USA">美国</option>
</select>
<br>
<label for="state">省份:</label><br>
<select id="state" name="state">
<option value="">请选择</option>
</select>
<br>
<label for="city">城市:</label><br>
<select id="city" name="city">
<option value="">请选择</option>
</select>
</form>
<!-- JavaScript 代码 -->
const countrySelect = document.getElementById('country');
const stateSelect = document.getElementById('state');
const citySelect = document.getElementById('city');
// 国家、省份、城市的数据
const data = {
China: {
Beijing: ['北京市'],
Shanghai: ['上海市'],
Guangdong: ['广州市', '深圳市']
},
USA: {
California: ['Los Angeles', 'San Francisco'],
NewYork: ['New York City']
}
};
// 当国家选择发生改变时,更新省份的选项
countrySelect.addEventListener('change', () => {
const country = countrySelect.value;
stateSelect.innerHTML = '<option value="">请选择</option>';
for (const state in data[country]) {
stateSelect.innerHTML += `<option value="${state}">${state}</option>`;
}
});
// 当省份选择发生改变时,更新城市的选项
stateSelect.addEventListener('change', () => {
const country = countrySelect.value;
const state = stateSelect.value;
citySelect.innerHTML = '<option value="">请选择</option>';
for (const city of data[country][state]) {
citySelect.innerHTML += `<option value="${city}">${city}</option>`;
}
});
```
这段代码中使用了三个下拉列表(即 `select` 元素)