javascript学习7
日期：2014-05-16 浏览次数：20587 次
javascript学习七
省市级联选择：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function changeCity(){
var province=document.myform.selProvince.value;
//alert(province);
var newOption1,newOption2;
switch(province){//根据用户选择的省份，动态创建“城市”下拉框选项
case "四川省" :
newOption1=new Option("成都市","chendu");//创建一个下拉框选项
newOption2=new Option("泸州市","luzhou");
break;
case "湖北省" :
newOption1=new Option("武汉市","wuhan");
newOption2=new Option("襄樊市","xiangfan");
break;
case "山东省" :
newOption1=new Option("青岛市","qingdao");
newOption2=new Option("烟台市","yantai");
break;
}
document.myform.selCity.options.length=0;
document.myform.selCity.options.add(newOption1);
document.myform.selCity.options.add(newOption2);
}
</script>
</head>
<body>
<form name="myform" action="">
省份：
<select name="selProvince" onChange="changeCity()">
<option>--请选择开户账号的省份--</option>
<option value="四川省">四川省</option>
<option value="山东省">山东省</option>
<option value="湖北省">湖北省</option>
</select>
城市：
<select name="selCity">
<option>--请选择开户帐号的城市--</option>
</select>
</form>
</body>
</html>
?
用数组优化省市级联选择：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function changeCity(){
var cityList=new Array();
cityList[0]=['城都','绵阳','德阳','自贡','内江','乐山','南充','雅安','眉山','甘孜','凉山','泸州'];
cityList[1]=['济南','青岛','淄博','枣庄','东营','烟台','潍坊','济宁','泰安','威海','日照'];
cityList[2]=['武汉','宜昌','荆州','襄樊','黄石','荆门','黄冈','十堰','恩施','潜江'];
//获得省份选项的索引号，如四川省为1，比对应的数组索引号多1
var pIndex=document.myform.selProvince.selectedIndex-1;
var newOption1;
document.myform.selCity.options.length=0;//清空“城市”下拉框原内容
for(var j in cityList[pIndex]){
newOption1=new Option(cityList[pIndex][j],cityList[pIndex][j]);
document.myform.selCity.options.add(newOption1);
}
}
</script>
</head>
<body>
<form action="" name="myform">
省份：
<select name="selProvince" onChange="changeCity()">
<option>--请选择开户帐号的省份--</option>
<option value="四川省">四川省</option>
<option value="山东省">山东省</option>
<option value="湖北省">湖北省</option>
</select>
城市：
<select name="selCity">
<option>--请选择开户帐号的城市</option>
</select>
</form>
</body>
</html>
?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function changeCity(){
var cityList=new Array();
cityList['山东省']=['城都','绵阳','德阳','自贡','内江','乐山','南充','雅安','眉山','甘孜','凉山','泸州'];
cityList['四川省']=['济南','青岛','淄博','枣庄','东营','烟台','潍坊','济宁','泰安','威海','日照'];
cityList['湖北省']=['武汉','宜昌','荆州','襄樊','黄石','荆门','黄冈','十堰','恩施','潜江'];
//获得省份选项的索引号，如四川省为1，比对应的数组索引号多1
var pIndex=document.myform.selProvince.value;
var newOption1;
document.myform.selCity.options.length=0;//清空“城市”下拉框原内容
for(var j in cityList[pIndex]){
newOption1=new Option(cityList[pIndex][j],cityList[pIndex][j]);
document.myform.selCity.options.add(newOption1);
}
}
</script>
</head>
<body>
<form action="" name="myform">
省份：
<select n
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
