首頁 > web前端 > js教程 > JS製作簡單的三級連動_javascript技巧

JS製作簡單的三級連動_javascript技巧

WBOY
發布: 2016-05-16 16:08:42
原創
1350 人瀏覽過

用javascript製作的一個簡單三級連動,非常簡單實用

複製程式碼 程式碼如下:



   
       
       
   
   
        省:
       
        市:
       
        區:
       
   
    <script><br />          //聲明省<br />         var pres = ["北京", "上海", "山東"]; //直接聲明Array<br />          //聲明城市<br />         var cities = [<br />             ["東城", "昌平", "海淀"],<br />             ["浦東", "高區"],<br />             ["濟南", "青島"]<br />         ];<br />         var areas = [<br />                 [<br />                     ["東城1", "東城2", "東城3"],<br />                     ["昌平1", "昌平2", "昌平3"],<br />                     ["海淀1", "海淀2", "海淀3"]<br />                 ],<br />                 [<br />                     ["浦東1", "浦東2", "浦東3"],<br />                     ["高區1", "高區2", "高區3"]<br />                 ],<br />                 [<br />                     ["濟南1", "濟南2"],<br />                     ["青島1", "青島2"]<br />                 ]<br />             ]<br />             //設定一個省份的公共下標<br />         var pIndex = -1;<br />         var preEle = document.getElementById("pre");<br />         var cityEle = document.getElementById("city");<br />         var areaEle = document.getElementById("area");<br />          //先設定省份的值<br />         for (var i = 0; i < pres.length; i ) {<br />             //宣告option.<option value="pres[i]">Pres[i]<br />             var op = new Option(pres[i], i);<br />             //新增<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 />             //取得值<br />             var val = obj.value;<br />             pIndex = obj.value;<br />             //取得ctiry<br />             var cs = cities[val];<br />             //取得預設區域<br />             var as = areas[val][0];<br />             //先清空城市<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>

以上所述就是本文的全部內容了,希望大家能夠喜歡。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板