省份选择案例

啊渊啊渊.

于 2022-03-07 22:16:24 发布

阅读量227

点赞数

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_64376967/article/details/123341320

版权

前端专栏收录该内容

3 篇文章

订阅专栏

总结一下今天晚上，从7：00——10：00，一直在写这个案例，HbuilderX的报错功能真的希望能完善一下，对新手来说确实不友好，几个小错误找了整整一晚上，嗨害。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>省市选择案例</title>
		<!-- 思路：
		    1、给省份绑定事件
		    2、怎么知道选择的是哪个事件 
			3、bug解决：下一次选择时，上一次的数据不会被清空
					   解决方案：初始化标签体的值；
		-->
	</head>
	<body>
		<span >
			省份：<select id="f" style="text-align: center;">
				<option>--请选择--</option>
				<option value="a">山西省</option>
				<option value="b">山东省</option>
				<option value="c">内蒙古</option>
			</select>
		</span>
		<span>
			市：<select id="j" style="text-align: center;">
					<!-- <option>--请选择--</option> -->
			</select>
		</span>
		<script type="text/javascript">
			//bug解决方案：重置标签体的值
			document.getElementById("j").innerHTML = "<option>--请选择--</option>";
			//通过间接绑定事件执行function()
			document.getElementById("f").onchange = function(){
				//再次设置标签体的值
				document.getElementById("j").innerHTML = "<option>--请选择--</option>";
				//怎么知道点击的时哪个元素：通过获取value的值来判断改变的是哪个元素	
				var getName = document.getElementById("f").value;
				//视频中的内容，没有采用
				//this关键字在javascript中的作用：当前点击的是哪个元素，获取的就是哪个元素；
				// var getName = this.value;
				if(getName == "a"){
					document.getElementById("j").innerHTML =
						"<option>--请选择--</option>"+
						"<option>大同市</option>"+
						"<option>太原市</option>"+
						"<option>阳泉市</option>"
					;
				}else if(getName == "b"){
					document.getElementById("j").innerHTML =
						"<option>--请选择--</option>"+
						"<option>菏泽市</option>"+
						"<option>青岛市</option>"+
						"<option>曹县</option>"
					;
				}else if(getName == "c"){
					document.getElementById("j").innerHTML =
						"<option>--请选择--</option>"+
						"<option>呼和浩特</option>"+
						"<option>二连浩特</option>"+
						"<option>四子王旗</option>"
					;
				}
			}
		</script>
	</body>
</html>