论坛首页 Web前端技术论坛

javascript七

浏览 1655 次
锁定老帖子 主题:javascript七
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-12-28  

省市级联选择:

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

 

   发表时间:2011-12-29  
貌似 用不了。。。  楼主解释一下哦
0 请登录后投票
   发表时间:2011-12-29  
chinalmq说:
引用
貌似 用不了。。。  楼主解释一下哦


你怎么用的啊。我试过啊,可以用啊??

0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics