javascript省市級聯(lián)功能實現(xiàn)方法實例詳解
更新時間：2015年10月20日 14:57:43 作者：hacker0825
這篇文章主要介紹了javascript省市級聯(lián)功能實現(xiàn)方法,以不同實例形式分析了JavaScript實現(xiàn)省市級聯(lián)菜單的具體技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了javascript省市級聯(lián)功能實現(xiàn)方法。分享給大家供大家參考，具體如下：
初步實現(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("綿陽市", "mianyang");
break;
case "湖北省" :
newoption1= new Option("武漢市","wuhan");
newoption2= new Option("襄樊市","xiangfan");
break;
case "山東省" :
newoption1= new Option("青島市","qingdao");
newoption2= new Option("煙臺市","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>--請選擇開戶帳號的省份--</option>
<OPTION value="四川省">四川省</OPTION>
<OPTION value="山東省">山東省</OPTION>
<OPTION value="湖北省">湖北省</OPTION>
</select>
<select name="selcity">
<option>--請選擇開戶帳號的城市--</option>
</select>
</form>
</html>
改進實現(xiàn)方法：
<html>
<head>
<script language="javascript">
function changecity(){
var cityList = new Array();
cityList[0]=['成都', '綿陽', '德陽', '自貢'];
cityList[1]=['濟南', '青島', '淄博', '棗莊'];
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>--請選擇省份--</option>
<OPTION value="四川省">四川省</OPTION>
<OPTION value="山東省">山東省</OPTION>
<OPTION value="湖北省">湖北省</OPTION>
</select>
<select name="selcity">
<option>--請選擇城市--</option>
</select>
</form>
</html>
改進方法2：
<html>
<head>
<script language="javascript">
function citychange(){
var cityList = new Array();
cityList['遼寧省'] = ['沈陽','鞍山','大連'];
cityList['山東省'] = ['濟南','煙臺','蓬萊'];
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>請選擇省份</option>
<OPTION value="遼寧省">遼寧省</OPTION>
<OPTION value="山東省">山東省</OPTION>
<OPTION value="山西省">山西省</OPTION>
</select>
<select name="selcity">
<option>請選擇城市</option>
</select>
</form>
</html>
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
javascript阻止scroll事件多次執(zhí)行的思路及實現(xiàn)
阻止scroll事件多次執(zhí)行主要是為了解決一些常見網(wǎng)頁特效在js解析時預期與效果不同，感興趣的朋友可以了解下2013-11-11
用jscript實現(xiàn)獲取登錄時間的腳本2008-05-05
這篇文章主要為大家介紹了uniapp如何使用定位過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要為大家詳細介紹了Bootstrap基本插件學習筆記之按鈕的相關資料,實現(xiàn)按鈕狀態(tài)控制等形式的交互，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
layui lay-verify form表單自定義驗證規(guī)則詳解
今天小編就為大家分享一篇layui lay-verify form表單自定義驗證規(guī)則詳解，具有很好的參考價值，相信我對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript實現(xiàn)的貝塞爾曲線算法簡單示例
這篇文章主要介紹了JavaScript實現(xiàn)的貝塞爾曲線算法,結(jié)合簡單實例形式分析了基于javascript的貝塞爾曲線算法的相關實現(xiàn)技巧,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了js,jq,css多方面實現(xiàn)簡易下拉菜單功能,需要的朋友可以參考下2017-05-05
JavaScript數(shù)據(jù)結(jié)構(gòu)中棧的應用之表達式求值問題詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)中棧的應用之表達式求值問題,詳細分析了中綴表達式、后綴表達式等概念、原理與轉(zhuǎn)換方法,以及基于后綴表達式實現(xiàn)的表達式求值相關操作技巧,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細介紹了微信小程序之電影影評小程序制作代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家詳細介紹了如何利用原生js實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04