快捷導(dǎo)航

JavaScript實現(xiàn)三級級聯(lián)特效

更新時間：2017年11月05日 09:36:33 作者：AsiasticWormwood

這篇文章主要介紹了JavaScript實現(xiàn)三級級聯(lián)特效，選擇省會出現(xiàn)相應(yīng)的縣下拉框，同時市的下拉框改變，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)三級級聯(lián)特效的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>

<!-- 實現(xiàn)效果：選擇省會出現(xiàn)相應(yīng)的縣下拉框，同時市的下拉框改變-->
    <script type="application/javascript">  

　　　　//二維數(shù)組存放市的信息
      var shi =[["麗水市","杭州市"],["新鄉(xiāng)","鄭州"]]; 
    　　//三維數(shù)組存放縣的信息   

　　　var xianes = [[["云和","景寧"],["桐廬","原陽"]],[["衛(wèi)輝","下鄉(xiāng)"],["中原","二七"]]];
      //所選的省值

　　　　var proIndex = 0;
      function sgc(){
        //獲得所選擇的省的下拉框值

　　　　 var pro = document.getElementById("sheng");
       //獲得市的下拉框 

　　　　var cit = document.getElementById("shi");
       //將省的value與市的一維數(shù)組下標(biāo)所對應(yīng) 

　　　　proIndex = pro.value-1;

　　　　//清空市下拉框中原有的值
        cit.options.length = 1;
        //通過for循環(huán)往下拉框中添加市的信息
        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獲得所選的省的值作為縣的數(shù)組的一維數(shù)組下標(biāo)，通過cit.value作為縣數(shù)組的二維數(shù)組下標(biāo)，遍歷獲得數(shù)組值
        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值改變后調(diào)用方法
    <select id = "sheng" onchange = "sgc();">
      <option>----省份---</option>
      <option value = "1">浙江省</option>
      <option value = "2">河南省</option>
    </select>
    <select id = "shi" onchange="sic();">
      <option>---市區(qū)---</option>
    </select>
    <select id = "xian" >
      <option>---縣區(qū)---</option>
    </select>
  </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: