一个简单的 下拉框 二级列表
时间: 2024-05-02 19:17:33 浏览: 27
可以使用 HTML 和 JavaScript 来实现一个简单的下拉框二级列表。
HTML 结构:
```html
<select id="list1" onchange="populateList2()">
<option value="">请选择</option>
<option value="fruit">水果</option>
<option value="vegetable">蔬菜</option>
</select>
<select id="list2">
<option value="">请选择</option>
</select>
```
JavaScript 代码:
```javascript
const list1 = document.getElementById('list1');
const list2 = document.getElementById('list2');
const options = {
fruit: ['苹果', '香蕉', '橙子'],
vegetable: ['西红柿', '黄瓜', '土豆']
}
function populateList2() {
const selected = list1.value;
list2.innerHTML = '<option value="">请选择</option>';
if (selected && options[selected]) {
options[selected].forEach(item => {
const option = document.createElement('option');
option.value = item;
option.text = item;
list2.appendChild(option);
});
}
}
```
上述代码中,第一个下拉框的选项是水果和蔬菜,当选择其中一个选项时,第二个下拉框中会显示该选项下的所有水果或蔬菜。`options` 对象中存储了每个选项下的子选项。`populateList2` 函数会根据第一个下拉框的选项来更新第二个下拉框的选项。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)