javascript学习七

最新推荐文章于 2024-09-11 15:33:18 发布

programstudy0821

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量84

点赞数

分类专栏： javascript学习笔记文章标签： javascript ViewUI

javascript学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

省市级联选择：

<!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 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>