首页 > > 网页制作 > Javascript >

三级级联(js实现)

2018-06-24 00:42:38来源：未知阅读 ()

<!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>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有