Create simple three-level linkage with JS_javascript skills

A simple three-level linkage made with javascript, very simple and practical

Copy code The code is as follows:

          
                                                                                           

Province:
         
                                                Please select
                                                                                          City:
           
District:
          

<script><br> //State the province<br>         var pres = ["Beijing", "Shanghai", "Shandong"]; //Declare Array<br> directly                                                                                                                                                                                                                                                                         //state the city       var cities = [<br>               ["Dongcheng", "Changping", "Haidian"],<br>                                                                             ["Pudong", "高区"],<br>              ["Jinan", "Qingdao"]<br> ];<br>       var areas = [<br>                                                                ["Dongcheng 1", "Dongcheng 2", "Dongcheng 3"], <br>                                                                 ["Changping 1", "Changping 2", "Changping 3"],<br>                                 ["Haidian1", "Haidian2", "Haidian3"]<br> ],<br>                                                                                                                                                                                                                                       ["Pudong1", "Pudong2", "Pudong3"],<br>                                                                                                                                                                                                Since ],<br>                                                                ["Jinan1", "Jinan2"],<br>                                  ["Qingdao 1", "Qingdao 2"]<br> ]<br> ]<br> //Set the public subscript of a province<br>         var pIndex = -1;<br>          var preEle = document.getElementById("pre");<br>          var cityEle = document.getElementById("city");<br>       var areaEle = document.getElementById("area");<br> //Set the province value first<br> for (var i = 0; i < pres.length; i ) {<br /> //Declare option.<option value="pres[i]">Pres[i]</option><br>                var op = new Option(pres[i], i);<br>                                                                                                                             preEle.options.add(op);<br> }<br>          function chg(obj) {<br>If (obj.value == -1) {<br> CityEle.options.length = 0;<br> areaEle.options.length = 0;<br>             }<br> //Get value<br>             var val = obj.value;<br>               pIndex = obj.value;<br> //Get ctiry<br>           var cs = cities[val];<br> //Get the default area<br>           var as = areas[val][0];<br>                 //Clear the market first<br>                cityEle.options.length = 0;<br> areaEle.options.length = 0;<br> for (var i = 0; i < cs.length; i ) {<br />               var op = new Option(cs[i], i);<br />                     cityEle.options.add(op);<br />             }<br /> for (var i = 0; i < as.length; i ) {<br />               var op = new Option(as[i], i);<br /> areaEle.options.add(op);<br />             }<br /> }<br />          function chg2(obj) {<br />             var val = obj.selectedIndex;<br />           var as = areas[pIndex][val];<br /> areaEle.options.length = 0;<br /> for (var i = 0; i < as.length; i ) {<br />               var op = new Option(as[i], i);<br /> areaEle.options.add(op);<br />             }<br /> }<br /> </script>

The above is the entire content of this article, I hope you all like it.