JavaScript实现三级级联特效
程序员文章站
2022-04-09 21:34:01
本文实例为大家分享了js实现三级级联特效的具体代码，供大家参考，具体内容如下
<...
本文实例为大家分享了js实现三级级联特效的具体代码，供大家参考，具体内容如下
<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。