JavaScript实现三级级联特效的方法-创新互联

这篇文章主要介绍了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

　　//onchange():控件的value值改变后调用方法
    
      ----省份---
      浙江省
      河南省
    
    
      ---市区---
    
    
      ---县区---
    
  

感谢你能够认真阅读完这篇文章，希望小编分享的“JavaScript实现三级级联特效的方法”这篇文章对大家有帮助，同时也希望大家多多支持创新互联成都网站设计公司，关注创新互联成都网站设计公司行业资讯频道，更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。