JavaScript省市區(qū)三級聯(lián)動菜單效果
更新時間:2016年09月21日 15:56:27 作者:猿獅人
這篇文章主要為大家詳細介紹了JavaScript省市區(qū)三級聯(lián)動菜單效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了三級聯(lián)動省市區(qū)js完整代碼,供大家參考,具體內容如下
<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['陜西'] = [ '西安', '寶雞', '咸陽' ]; 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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JS實多級聯(lián)動下拉菜單類,簡單實現省市區(qū)聯(lián)動菜單!
- JS簡單實現多級Select聯(lián)動菜單效果代碼
- 從QQ網站中提取的純JS省市區(qū)三級聯(lián)動菜單
- 基于Javascript實現二級聯(lián)動菜單效果
- JS實現的五級聯(lián)動菜單效果完整實例
- PHP+JS三級菜單聯(lián)動菜單實現方法
- javascript實現無限級select聯(lián)動菜單
- js 實現省市區(qū)三級聯(lián)動菜單效果
- javascript讀取Xml文件做一個二級聯(lián)動菜單示例
- 琥珀無限級聯(lián)動菜單-JavaScript版
- javascript 無限聯(lián)動菜單效果代碼
- JavaScript實現的聯(lián)動菜單特效示例
相關文章
Bootstrap基本插件學習筆記之模態(tài)對話框(16)
這篇文章主要為大家詳細介紹了Bootstrap基本插件學習筆記之模態(tài)對話框的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12JavaScript中統(tǒng)計Textarea字數并提示還能輸入的字符
是在文本框中輸入文字的時候,會自動統(tǒng)計輸入的字符,并顯示用戶還能輸入的字符,其實js也可以實現,下面就以示例的方式為大家講解下2014-06-06動態(tài)創(chuàng)建樣式表在各瀏覽器中的差異測試代碼
對于標準瀏覽器,直接使用css.innerHTML也可以修改HTMLStyleElement的css規(guī)則2011-09-09