JavaScript省市區(qū)三級(jí)聯(lián)動(dòng)菜單效果
本文實(shí)例為大家分享了三級(jí)聯(lián)動(dòng)省市區(qū)js完整代碼,供大家參考,具體內(nèi)容如下
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var cityList = new Array(); var quList = new Array(); cityList['北京'] = [ '北京' ]; cityList['浙江'] = [ '杭州市', '溫州市', '金華市', '臨安市' ]; cityList['陜西'] = [ '西安', '寶雞', '咸陽(yáng)' ]; cityList['甘肅'] = [ '蘭州市', '武威市', '酒泉市', '張掖市' ]; quList['北京'] = [ '1區(qū)', '2區(qū)', '3區(qū)', '4區(qū)' ]; quList['杭州市'] = [ '5區(qū)', '6區(qū)', '7區(qū)', '8區(qū)' ]; quList['溫州市'] = [ '9區(qū)', '10區(qū)', '11區(qū)', '12區(qū)' ]; quList['西安'] = [ '13區(qū)', '14區(qū)', '15區(qū)', '16區(qū)' ]; quList['寶雞'] = [ '17區(qū)', '18區(qū)', '19區(qū)', '20區(qū)' ]; quList['蘭州市'] = [ '21區(qū)', '22區(qū)', '23區(qū)', '24區(qū)' ]; window.onload = allData; function allData() { var shengfen = document.getElementById('shengfen'); for ( var sf in cityList) { shengfen.add(new Option(sf, sf)); } } function changeCity() { var chengshi = document.getElementById('chengshi'); var sheng = document.getElementById('shengfen').value; chengshi.options.length = 1; for ( var cs in cityList[sheng]) { chengshi.add(new Option(cityList[sheng][cs], cityList[sheng][cs])); } } function changequ() { var shiqu = document.getElementById('shiqu'); var cheng = document.getElementById('chengshi').value; shiqu.options.length = 1; for ( var sh in quList[cheng]) { shiqu.add(new Option(quList[cheng][sh], quList[cheng][sh])); } } </script> </head> <body> <br /> <select id="shengfen" style="width:100px" onchange="changeCity()"><option>--選擇省份--</option> </select> <select id="chengshi" style="width:100px" onchange="changequ()"><option>--選擇城市--</option> </select> <select id="shiqu" style="width:100px"><option>--選擇區(qū)縣--</option> </select> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS實(shí)多級(jí)聯(lián)動(dòng)下拉菜單類,簡(jiǎn)單實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)菜單!
- JS簡(jiǎn)單實(shí)現(xiàn)多級(jí)Select聯(lián)動(dòng)菜單效果代碼
- 從QQ網(wǎng)站中提取的純JS省市區(qū)三級(jí)聯(lián)動(dòng)菜單
- 基于Javascript實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單效果
- JS實(shí)現(xiàn)的五級(jí)聯(lián)動(dòng)菜單效果完整實(shí)例
- PHP+JS三級(jí)菜單聯(lián)動(dòng)菜單實(shí)現(xiàn)方法
- javascript實(shí)現(xiàn)無(wú)限級(jí)select聯(lián)動(dòng)菜單
- js 實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)菜單效果
- javascript讀取Xml文件做一個(gè)二級(jí)聯(lián)動(dòng)菜單示例
- 琥珀無(wú)限級(jí)聯(lián)動(dòng)菜單-JavaScript版
- javascript 無(wú)限聯(lián)動(dòng)菜單效果代碼
- JavaScript實(shí)現(xiàn)的聯(lián)動(dòng)菜單特效示例
相關(guān)文章
微信小程序new Date()方法失效問(wèn)題解決方法
這篇文章主要介紹了小程序new Date()方法失效問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07Bootstrap基本插件學(xué)習(xí)筆記之模態(tài)對(duì)話框(16)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之模態(tài)對(duì)話框的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12JavaScript中統(tǒng)計(jì)Textarea字?jǐn)?shù)并提示還能輸入的字符
是在文本框中輸入文字的時(shí)候,會(huì)自動(dòng)統(tǒng)計(jì)輸入的字符,并顯示用戶還能輸入的字符,其實(shí)js也可以實(shí)現(xiàn),下面就以示例的方式為大家講解下2014-06-06動(dòng)態(tài)創(chuàng)建樣式表在各瀏覽器中的差異測(cè)試代碼
對(duì)于標(biāo)準(zhǔn)瀏覽器,直接使用css.innerHTML也可以修改HTMLStyleElement的css規(guī)則2011-09-09Web層改進(jìn)II-用xmlhttp 無(wú)聲息提交復(fù)雜表單
Web層改進(jìn)II-用xmlhttp 無(wú)聲息提交復(fù)雜表單...2007-01-01通過(guò)百度地圖獲取公交線路的站點(diǎn)坐標(biāo)的js代碼
通過(guò)百度地圖獲取公交線路的站點(diǎn)坐標(biāo)的js代碼,需要的朋友可以參考下2012-05-05