四级联动,不使用select
时间: 2024-06-09 09:04:54 浏览: 16
四级联动一般是指在网页上,通过选择某一级别的选项,自动更新下一级别的选项。通常的实现方式是使用JavaScript来动态更新网页内容。
以下是一个简单的四级联动实现的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>四级联动</title>
<meta charset="utf-8">
<script type="text/javascript">
var province = new Array("北京","上海","广东","江苏");
var city = new Array();
city[0] = new Array("东城区","西城区","朝阳区","海淀区");
city[1] = new Array("黄浦区","徐汇区","长宁区","静安区");
city[2] = new Array("广州市","深圳市","珠海市","汕头市");
city[3] = new Array("南京市","无锡市","徐州市","常州市");
var district = new Array();
district[0] = new Array();
district[1] = new Array();
district[2] = new Array();
district[3] = new Array();
district[0][0] = new Array("东城1","东城2","东城3");
district[0][1] = new Array("西城1","西城2","西城3");
district[0][2] = new Array("朝阳1","朝阳2","朝阳3");
district[0][3] = new Array("海淀1","海淀2","海淀3");
district[1][0] = new Array("黄浦1","黄浦2","黄浦3");
district[1][1] = new Array("徐汇1","徐汇2","徐汇3");
district[1][2] = new Array("长宁1","长宁2","长宁3");
district[1][3] = new Array("静安1","静安2","静安3");
district[2][0] = new Array("广州1","广州2","广州3");
district[2][1] = new Array("深圳1","深圳2","深圳3");
district[2][2] = new Array("珠海1","珠海2","珠海3");
district[2][3] = new Array("汕头1","汕头2","汕头3");
district[3][0] = new Array("南京1","南京2","南京3");
district[3][1] = new Array("无锡1","无锡2","无锡3");
district[3][2] = new Array("徐州1","徐州2","徐州3");
district[3][3] = new Array("常州1","常州2","常州3");
function initProvince(){
var selProvince = document.getElementById("selProvince");
for(var i=0;i<province.length;i++){
var option = document.createElement("option");
option.innerHTML = province[i];
option.value = i;
selProvince.appendChild(option);
}
initCity();
initDistrict();
}
function initCity(){
var selCity = document.getElementById("selCity");
var provinceIndex = document.getElementById("selProvince").value;
selCity.options.length = 0;
for(var i=0;i<city[provinceIndex].length;i++){
var option = document.createElement("option");
option.innerHTML = city[provinceIndex][i];
option.value = i;
selCity.appendChild(option);
}
initDistrict();
}
function initDistrict(){
var selDistrict = document.getElementById("selDistrict");
var provinceIndex = document.getElementById("selProvince").value;
var cityIndex = document.getElementById("selCity").value;
selDistrict.options.length = 0;
for(var i=0;i<district[provinceIndex][cityIndex].length;i++){
var option = document.createElement("option");
option.innerHTML = district[provinceIndex][cityIndex][i];
option.value = i;
selDistrict.appendChild(option);
}
}
</script>
</head>
<body onload="initProvince()">
<div>
<label>省份:</label>
<select id="selProvince" onchange="initCity()">
</select>
</div>
<div>
<label>城市:</label>
<select id="selCity" onchange="initDistrict()">
</select>
</div>
<div>
<label>区县:</label>
<select id="selDistrict">
</select>
</div>
</body>
</html>
```
在这个例子中,通过初始化省份列表和设置省份列表的onchange事件来动态生成城市和区县列表。然后通过设置城市列表的onchange事件来动态生成区县列表。最后,将生成的列表添加到相应的select元素中。
相关推荐
![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)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)