JavaScript implémente des effets spéciaux en cascade à trois niveaux-js tutoriel-php.cn

JavaScript implémente des effets spéciaux en cascade à trois niveaux

小云云

Libérer： 2017-12-09 14:05:18

original

1655 Les gens l'ont consulté

Cet article présente principalement JavaScript pour implémenter des effets spéciaux en cascade à trois niveaux. Sélectionnez la capitale provinciale et la liste déroulante du comté correspondante apparaîtra. En même temps, la liste déroulante de la ville changera. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.

L'exemple de cet article partage le code spécifique pour réaliser des effets spéciaux en cascade à trois niveaux en js pour votre référence. Le contenu spécifique est le suivant

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

Copier après la connexion

Recommandations associées ：

javascript+jQuery obtient un effet d'affichage du temps de démarrage à 360°

Portée et portée au niveau du bloc en Javascript

JavaScript implémente la production d'effets spéciaux pour les cases sélectionnées

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!