<select id="provice"><option value="-1">請選擇</option></select><select id="city"></select><select id="country"></select><script>//創(chuàng)建數(shù)組保存各個省份城市地區(qū)//省份：一維數(shù)組var proviceArr=['江西','福建','浙江'];//城市：二維數(shù)組var cityArr=[['上饒市','南昌市','萍鄉(xiāng)市'],['福州市','廈門市','三明市'],['杭州市','溫州市','紹興市']];//地區(qū)：三維數(shù)組var countryArr=[[['廣豐縣','玉山縣','上饒縣'],['東湖區(qū)','西湖區(qū)','青云譜區(qū)'],['安源區(qū)','湘東區(qū)','上栗縣']],[['鼓樓區(qū)','晉安區(qū)','馬尾區(qū)'],['湖里區(qū)','海滄區(qū)','集美區(qū)'],['三元區(qū)','梅列區(qū)','永安市']],[['上城區(qū)','下城區(qū)','江干區(qū)'],['鹿城區(qū)','龍灣區(qū)','甌海區(qū)'],['越城區(qū)','柯橋區(qū)','上虞區(qū)']]];function createOption(obj,data){for(var i in data){var op=new Option(data[i],i);console.log(op);obj.options.add(op);console.log(obj.options);}}var provice=document.getElementById('provice');createOption(provice,proviceArr);var city=document.getElementById('city');provice.onchange=function(){city.options.length=0;createOption(city,cityArr[provice.value]);if(provice.value>=0){city.onchange();}else{country.options.length=0;}}var country=document.getElementById('country');city.onchange=function(){country.options.length=0;createOption(country,countryArr[provice.value][city.value]);}</script>

總結(jié)

以上是生活随笔為你收集整理的JavaScript的三级联动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。