javascript省市級(jí)聯(lián)功能實(shí)現(xiàn)方法實(shí)例詳解
更新時(shí)間：2015年10月20日 14:57:43 作者：hacker0825
這篇文章主要介紹了javascript省市級(jí)聯(lián)功能實(shí)現(xiàn)方法,以不同實(shí)例形式分析了JavaScript實(shí)現(xiàn)省市級(jí)聯(lián)菜單的具體技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了javascript省市級(jí)聯(lián)功能實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：
初步實(shí)現(xiàn)方法：
<html>
<head>
<script language="javascript">
function changecity(){
var province = document.form1.selprovince.value;
var newoption1,newoption2;
switch(province){
case "四川省":
newoption1 = new Option("成都市", "chengdu");
newoption2 = new Option("綿陽(yáng)市", "mianyang");
break;
case "湖北省" :
newoption1= new Option("武漢市","wuhan");
newoption2= new Option("襄樊市","xiangfan");
break;
case "山東省" :
newoption1= new Option("青島市","qingdao");
newoption2= new Option("煙臺(tái)市","yantai");
break;
}
document.form1.selcity.options.length=0;
document.form1.selcity.options.add(newoption1);
document.form1.selcity.options.add(newoption2);
}
</script>
</head>
<form name="form1" action="" method="post">
<select name="selprovince" onchange="changecity()">
<option>--請(qǐng)選擇開(kāi)戶帳號(hào)的省份--</option>
<OPTION value="四川省">四川省</OPTION>
<OPTION value="山東省">山東省</OPTION>
<OPTION value="湖北省">湖北省</OPTION>
</select>
<select name="selcity">
<option>--請(qǐng)選擇開(kāi)戶帳號(hào)的城市--</option>
</select>
</form>
</html>
改進(jìn)實(shí)現(xiàn)方法：
<html>
<head>
<script language="javascript">
function changecity(){
var cityList = new Array();
cityList[0]=['成都', '綿陽(yáng)', '德陽(yáng)', '自貢'];
cityList[1]=['濟(jì)南', '青島', '淄博', '棗莊'];
cityList[2]=['武漢', '宜昌', '荊州', '襄樊'];
var pindex = document.form1.selprovince.selectedIndex-1;
var newoption1;
document.form1.selcity.options.length = 0;
for(var j in cityList[pindex]){
newoption1 = new Option(cityList[pindex][j], cityList[pindex][j]);
document.form1.selcity.options.add(newoption1);
}
}
</script>
</head>
<form name="form1" action="" method="post">
<select name="selprovince" onchange="changecity()">
<option>--請(qǐng)選擇省份--</option>
<OPTION value="四川省">四川省</OPTION>
<OPTION value="山東省">山東省</OPTION>
<OPTION value="湖北省">湖北省</OPTION>
</select>
<select name="selcity">
<option>--請(qǐng)選擇城市--</option>
</select>
</form>
</html>
改進(jìn)方法2：
<html>
<head>
<script language="javascript">
function citychange(){
var cityList = new Array();
cityList['遼寧省'] = ['沈陽(yáng)','鞍山','大連'];
cityList['山東省'] = ['濟(jì)南','煙臺(tái)','蓬萊'];
cityList['山西省'] = ['太原','大同','平遙'];
var pindex = document.form1.selprovince.value;
var newoption1;
document.form1.selcity.options.length = 0;
for(var i in cityList[pindex]){
newoption1 = new Option(cityList[pindex][i],cityList[pindex][i]);
document.form1.selcity.options.add(newoption1);
}
}
</script>
</head>
<form action="" name="form1" method="post">
<select name="selprovince" onchange="citychange()">
<option>請(qǐng)選擇省份</option>
<OPTION value="遼寧省">遼寧省</OPTION>
<OPTION value="山東省">山東省</OPTION>
<OPTION value="山西省">山西省</OPTION>
</select>
<select name="selcity">
<option>請(qǐng)選擇城市</option>
</select>
</form>
</html>
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
40行原生js代碼實(shí)現(xiàn)前端簡(jiǎn)易路由
路由就是指隨著瀏覽器地址欄的變化,展示給用戶的頁(yè)面也不相同,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)40行原生js代碼實(shí)現(xiàn)前端簡(jiǎn)易路由的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細(xì)介紹了js獲取USB掃碼槍數(shù)據(jù)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript如何實(shí)現(xiàn)監(jiān)聽(tīng)鍵盤輸入和鼠標(biāo)監(jiān)點(diǎn)擊
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)監(jiān)聽(tīng)鍵盤輸入和鼠標(biāo)監(jiān)點(diǎn)擊，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要給大家整理了一些在面試的時(shí)候經(jīng)常遇到的前端面試題，本文總結(jié)的這三十道面試題都是一些最近碰到的一些較為有用的前端題目，相信會(huì)對(duì)大家面試具有一定的參考價(jià)值，需要的朋友可以參考學(xué)習(xí)，下面來(lái)一起看看吧。2017-04-04
js特殊字符轉(zhuǎn)義。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
這篇文章主要介為大家詳細(xì)紹了Bootstrap CSS布局之圖像的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
javascript 函數(shù)及作用域總結(jié)介紹
本文是對(duì)javascript在的函數(shù)及作用域進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
javascript中的with語(yǔ)句學(xué)習(xí)筆記及用法
在本篇文章里小編給大家分享的是關(guān)于javascript中的with語(yǔ)句學(xué)習(xí)筆記及用法，有需要的朋友們可以學(xué)習(xí)下。2020-02-02
本篇文章是對(duì)js中正則表達(dá)式的使用進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以參考下2013-07-07
JS通用方法觸發(fā)點(diǎn)擊事件代碼實(shí)例
這篇文章主要介紹了JS通用方法觸發(fā)點(diǎn)擊事件代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02