Maison > Article > interface Web > JS implémente une cascade à trois niveaux

JS implémente une cascade à trois niveaux

php中世界最好的语言original: 2018-04-16 10:16:512309parcourir

Cette fois, je vais vous proposer JS pour implémenter la cascade à trois niveaux. Quelles sont les précautions pour que JS implémente la cascade à trois niveaux. Ce qui suit est un cas pratique, jetons un coup d'œil. .

L'exemple de cet article partage avec vous le code spécifique pour implémenter des effets spéciaux en cascade à trois niveaux dans 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>

Je crois que vous l'avez fait. maîtrisé la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer un environnement Webpack avec vue et nodeArticle suivant：Comment créer un environnement Webpack avec vue et node

Articles Liés

Voir plus