JS中onchange事件:域内容被改变的事件

最新推荐文章于 2022-06-27 12:53:23 发布

Code_My_Dream

最新推荐文章于 2022-06-27 12:53:23 发布

阅读量2k

点赞数 2

文章标签： javascript 二级联动域内容被改变的事件 onchange事件

本文链接：https://blog.csdn.net/Code_My_Dream/article/details/62047934

版权

大炮最近复习js的事件
复习onchange事件的时候做了一个，城市和区的二级联动的菜单，和大家分享一下
onchange:域内容被改变的事件需求：实现二级联动

<body>
	This is my HTML page.
	<br>
	<!-- 定义出城市和区 -->
	<select id="city">
		<option value="bj">北京</option>
		<option value="tj">天津</option>
		<option value="sh">上海</option>
		<option value="wh">武汉</option>
		<option value="hz">杭州</option>
	</select>

	<select id="area">
		<option>海淀区</option>
		<option>朝阳区</option>
		<option>西城区</option>
		<option>北城区</option>
	</select>
</body>
<script type="text/javascript">
	//用document.getElementById("city")方法获得id
	var select1 = document.getElementById("city");
	//用onchange的局部方法来实现区域联动
	select1.onchange = function() {
		var op = select1.value;
		switch (op) {
		case "bj":
			//通过id，获得了area对象
			var area = document.getElementById("area");
			//对area用innerHTML方法来实现了以字符串类型来替换了 html代码
			area.innerHTML = "<option>海淀区</option><option>朝阳区</option><option>西城区</option><option>北城区</option>";
			break;

		case "tj":
			var area = document.getElementById("area");
			area.innerHTML = "<option>经济区</option><option>科技区</option><option>天天区</option><option>北城区</option>";
			break;

		case "sh":
			var area = document.getElementById("area");
			area.innerHTML = "<option>浦东区</option><option>浦西区</option><option>黄浦区</option><option>浦江区</option>";
			break;

		case "wh":
			var area = document.getElementById("area");
			area.innerHTML = "<option>武昌区</option><option>汉阳区</option><option>江岸区</option><option>江夏区</option><option>蔡甸区</option>";
			break;

		case "hz":
			var area = document.getElementById("area");
			area.innerHTML = "<option>义乌区</option><option>西湖区</option><option>江柳区</option><option>江夏区</option><option>蔡甸区</option>";
			break;

		}
	}
</script>

就这样就可以通过js中的onchange事件，实现区域联动的效果了主要是通过onchange域内容被改变的事件，

和调用了用innerHTML方法来实现了以字符串类型来替换了 html代码