JavaScript实现三级级联特效实例分享

来源：动视网责编：小采时间：2020-11-27 20:05:24

JavaScript实现三级级联特效实例分享

JavaScript实现三级级联特效实例分享:本文主要介绍了JavaScript实现三级级联特效，选择省会出现相应的县下拉框，同时市的下拉框改变，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。<!DOCTYPE html> <html> <head> <meta ch

推荐度：

点击下载本文 文档为doc格式

导读JavaScript实现三级级联特效实例分享:本文主要介绍了JavaScript实现三级级联特效，选择省会出现相应的县下拉框，同时市的下拉框改变，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。<!DOCTYPE html> <html> <head> <meta ch

本文主要介绍了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>

JavaScript实现三级级联特效实例分享

推荐度：

点击下载本文 文档为doc格式

标签：特效实现 js

热门焦点

JavaScript实现三级级联特效实例分享

JavaScript实现三级级联特效实例分享

JavaScript实现三级级联特效实例分享

最新推荐

猜你喜欢

热门推荐