JavaScript实现三级级联特效实例分享
- 小云云 原创
- 2018-01-19 14:40:45 1586浏览
本文主要介绍了javascript实现三级级联特效，选择省会出现相应的县下拉框，同时市的下拉框改变，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 实现效果：选择省会出现相应的县下拉框，同时市的下拉框改变-->
<script type="application/javascript">
//二维数组存放市的信息
var shi =[["丽水市","杭州市"],["新乡","郑州"]];
//三维数组存放县的信息
var xianes = [[["云和","景宁"],["桐庐","原阳"]],[["卫辉","下乡"],["中原","二七"]]];
//所选的省值
var proIndex = 0;
function sgc(){
//获得所选择的省的下拉框值
var pro = document.getElementById("sheng");
//获得市的下拉框
var cit = document.getElementById("shi");
//将省的value与市的一维数组下标所对应
proIndex = pro.value-1;
//清空市下拉框中原有的值
cit.options.length = 1;
//通过for循环往下拉框中添加市的信息
for(var i = 0;i < shi[proIndex].length;i++){
var op = document.createElement("option");
var citName = document.createTextNode(shi[proIndex][i]);
op.value = i;
op.appendChild(citName);
cit.appendChild(op);
}
}
//市的值改变后改变县的值
function sic(){
var are = document.getElementById("xian");
var cit = document.getElementById("shi");
are.options.length = 1;
//通过proIndex获得所选的省的值作为县的数组的一维数组下标，通过cit.value作为县数组的二维数组下标，遍历获得数组值
for(var i = 0;i<xianes[proIndex][cit.value].length;i++){
var op = document.createElement("option");
var areName = document.createTextNode(xianes[proIndex][cit.value][i]);
op.value = i;
op.appendChild(areName);
are.appendChild(op);
}
}
</script>
//onchange():控件的value值改变后调用方法
<select id = "sheng" onchange = "sgc();">
<option>----省份---</option>
<option value = "1">浙江省</option>
<option value = "2">河南省</option>
</select>
<select id = "shi" onchange="sic();">
<option>---市区---</option>
</select>
<select id = "xian" >
<option>---县区---</option>
</select>
</body>
</html>相关推荐：
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
