js事件学习笔记1

js事件学习笔记1_onchange

需求：实现一个简单的地址关联下拉选择框。

　　1、通过id拿到select标签

　　　　var city = document.getElementById("city");

　　2、定义一个select.onchange匿名函数

　　3、定义一个变量获取select标签里面的value

　　　　var cy = city.value;

　4、通过switch循环判断这个变量cy是哪个值，进而进行相应的html代码替换。
　　document.getElementById("area").innerHTML = "<option>xxx</option>"

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<title></title>
		<style type="text/css">

		</style>
	</head>
	<body>
		<select id="city">
			<option value="bj">北京</option>
			<option value="tj">天津</option>
			<option value="sh">上海</option>
		</select>
		<select id="area">
			<option>海淀</option>
			<option>朝阳</option>
			<option>东城</option>
		</select>
	</body>
	<script type="text/javascript">
		var city = document.getElementById("city");
		city.onchange = function(){              
			var cy = city.value;
			switch (cy) {
			case "bj":
				var area = document.getElementById("area");
				area.innerHTML = "<option>海淀</option><option>朝阳</option><option>朝阳</option>";
				break;
			case "sh":
				var area = document.getElementById("area");
				area.innerHTML = "<option>浦东</option><option>杨浦</option><option>浦西</option>";
				break;
			case "tj":
				var area = document.getElementById("area");
				area.innerHTML = "<option>河西</option><option>安华</option><option>普洗</option>";
				break;

			default:
				alert("error");
			}
		}
		
		
		
	</script>
	
</html>