Maison >interface Web >js tutoriel >Créez un lien simple à trois niveaux avec les compétences JS_javascript

Créez un lien simple à trois niveaux avec les compétences JS_javascript

WBOY
WBOYoriginal
2016-05-16 16:08:421344parcourir

Un simple lien à trois niveaux réalisé avec javascript, très simple et pratique

Copier le code Le code est le suivant :




          
                                                                                       


Province :
         
Quartier :
          

<script><br> //Indiquer la province<br>         var pres = ["Beijing", "Shanghai", "Shandong"] //Déclarer le tableau<br> directement                                                                                                                                                                                                                                     //indiquer la ville       var villes = [<br>               ["Dongcheng", "Changping", "Haidian"],<br>                                                                             ["Pudong", "高区"],<br>              ["Jinan", "Qingdao"]<br> ];<br>       var zones = [<br>                                                                                                                                                                                                                                                                        ["Dongcheng 1", "Dongcheng 2", "Dongcheng 3"],<br>                                                                ["Changement 1", "Changement 2", "Changement 3"],<br>                                 ["Haidian1", "Haidian2", "Haidian3"]<br> ],<br>                                                                                                                                                                                                                                      ["Pudong1", "Pudong2", "Pudong3"],<br> Depuis ],<br>                                                               ["Jinan1", "Jinan2"],<br>                                  ["Qingdao 1", "Qingdao 2"]<br> ]<br> ]<br> //Définir l'indice public d'une province<br>         var pIndex = -1;<br>          var preEle = document.getElementById("pre");<br>          var cityEle = document.getElementById("city");<br>       var AreaEle = document.getElementById("area");<br> //Définissez d'abord la valeur de la province<br> pour (var i = 0; i < prés.length; i ) {<br /> //Déclarer l'option.<option value="pres[i]">Pres[i]</option><br>                var op = new Option(pres[i], i);<br>                                                                                                                        preEle.options.add(op);<br> ><br>          fonction chg(obj) {<br>Si (obj.value == -1) {<br> CityEle.options.length = 0;<br> zoneEle.options.longueur = 0;<br>             }<br> //Obtenir de la valeur<br>             var val = obj.value;<br>               pIndex = obj.value;<br> //Obtenir ctiry<br>           var cs = villes[val];<br> //Obtenir la zone par défaut<br>           var as = zones[val][0];<br>                 //Dégagez d'abord le marché<br>                cityEle.options.length = 0;<br> zoneEle.options.longueur = 0;<br> pour (var i = 0; i < cs.length; i ) {<br />               var op = new Option(cs[i], i);<br />                     cityEle.options.add(op);<br />             }<br /> pour (var i = 0; i < as.length; i ) {<br />               var op = new Option(as[i], i);<br /> AreaEle.options.add(op);<br />             }<br /> ><br />          fonction chg2(obj) {<br />             var val = obj.selectedIndex;<br />           var as = zones[pIndex][val];<br /> zoneEle.options.longueur = 0;<br /> pour (var i = 0; i < as.length; i ) {<br />               var op = new Option(as[i], i);<br /> AreaEle.options.add(op);<br />             }<br /> ><br /> </script>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

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