html+js+select只有一个下拉选择,但需实现多层级选择的代码
时间: 2024-06-10 12:03:45 浏览: 10
,应该怎么写?
可以通过给单个下拉选择框添加子选项的方式来实现多层级选择。具体做法是,在选择框中添加一个一个的option选项,并且根据上一个选中的选项不断追加子选项。代码如下:
HTML代码:
```html
<select id="select1">
<option value="">请选择</option>
</select>
<select id="select2">
<option value="">请选择</option>
</select>
```
JavaScript代码:
```javascript
var data = {
"北京": {
"东城区": ["王府井", "天安门"],
"西城区": ["西单", "国贸"],
},
"上海": {
"徐汇区": ["漕河泾", "田林"],
"黄浦区": ["南京东路", "外滩"],
},
};
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
for(var key in data){
var option = document.createElement("option");
option.value = key;
option.text = key;
select1.appendChild(option);
}
select1.onchange = function(){
select2.innerHTML = '<option value="">请选择</option>';
var key = select1.value;
var items = data[key];
for(var i in items){
var option = document.createElement("option");
option.value = i;
option.text = i;
select2.appendChild(option);
}
};
select2.onchange = function(){
var key1 = select1.value;
var key2 = select2.value;
var items = data[key1][key2];
console.log(items); // 打印出子选项
};
```
以上代码中,data变量中保存了所有用于选择框的配置数据,select1和select2分别是第一级和第二级的选择框实例。当第一级选择框发生改变时,依据其选中的值动态生成第二级选择框的选项,再在第二级选择框上绑定change事件来处理选项的选择事件,并打印出选中的完整数据。
相关推荐
![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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)