Heim > Artikel > Web-Frontend > javascript省市级联功能实现方法实例详解_javascript技巧
javascript省市级联功能实现方法实例详解_javascript技巧
- WBOYOriginal
- 2016-05-16 15:36:041270Durchsuche
本文实例讲述了javascript省市级联功能实现方法。分享给大家供大家参考，具体如下：
初步实现方法：
<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>
改进实现方法：
<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程序设计有所帮助。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS基于Mootools实现的个性菜单效果代码_javascript技巧Nächster Artikel：jquery如何获取元素的滚动条高度等实现代码_jquery