JavaScript省市區(qū)三級(jí)聯(lián)動(dòng)菜單效果

更新時(shí)間：2016年09月21日 15:56:27 作者：猿獅人

這篇文章主要為大家詳細(xì)介紹了JavaScript省市區(qū)三級(jí)聯(lián)動(dòng)菜單效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(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['陜西'] = [ '西安', '寶雞', '咸陽' ];
 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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js怎么覆蓋原有方法實(shí)現(xiàn)重寫
這篇文章主要介紹了js怎么覆蓋原有方法實(shí)現(xiàn)重寫,需要的朋友可以參考下
2014-09-09
一文帶你理解JS中的原型和原型鏈
在學(xué)習(xí)JavaScript中的繼承機(jī)制時(shí),我們常常會(huì)遇到原型和原型鏈這兩個(gè)概念,在初學(xué)階段,不理解這些概念很容易陷入迷茫,甚至?xí)?dǎo)致學(xué)習(xí) JS 的路程變得曲折,本文將介紹JavaScript原型和原型鏈的概念、設(shè)計(jì)思想以及相關(guān)的使用方法,需要的朋友可以參考下
2023-07-07
JavaScript正則表達(dá)式實(shí)例詳解
在編寫處理字符串的程序或網(wǎng)頁時(shí)，經(jīng)常會(huì)有查找符合某些復(fù)雜規(guī)則的字符串的需要。正則表達(dá)式就是用于描述這些規(guī)則的工具。換句話說，正則表達(dá)式就是記錄文本規(guī)則的代碼。
2016-10-10
javascript制作的cookie封裝及使用指南
這篇文章主要介紹了javascript制作的cookie封裝及使用指南,需要的朋友可以參考下
2015-01-01
Echarts柱狀圖實(shí)現(xiàn)同時(shí)顯示百分比+原始值+匯總值效果實(shí)例
echarts是一款功能強(qiáng)大、靈活易用的數(shù)據(jù)可視化庫,它提供了豐富的圖表類型和樣式,包括柱狀圖,這篇文章主要給大家介紹了關(guān)于Echarts柱狀圖實(shí)現(xiàn)同時(shí)顯示百分比+原始值+匯總值效果的相關(guān)資料,需要的朋友可以參考下
2024-08-08
淺談javascript中遇到的字符串對象處理
下面小編就為大家?guī)硪黄獪\談javascript中遇到的字符串對象處理。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
iframe 父窗口和子窗口相互的調(diào)用方法集錦
iframe 父窗口和子窗口相互的調(diào)用方法集錦，需要的朋友可以參考下。
2010-12-12
Bootstrap分頁插件之Bootstrap Paginator實(shí)例詳解
Bootstrap Paginator是一款基于Bootstrap的js分頁插件，功能很豐富，個(gè)人覺得這款插件已經(jīng)無可挑剔了，感興趣的朋友跟著腳本之家小編一起學(xué)習(xí)吧
2016-10-10
js 實(shí)現(xiàn)數(shù)值的千分位及保存小數(shù)方法(推薦)
下面小編就為大家?guī)硪黄猨s 實(shí)現(xiàn)數(shù)值的千分位及保存小數(shù)方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
連續(xù)操作HTMLElement對象圖文解決方法
Object.prototype.***不能用作在HTMLElement對象上，如本后面的抓圖所示。
2008-03-03