JavaScript实现下拉框选择不同选项，在指定位置显示不同数据内容

最新推荐文章于 2023-06-09 17:13:45 发布

伱糸淂忄

最新推荐文章于 2023-06-09 17:13:45 发布

阅读量4k

点赞数 4

分类专栏： JavaScript

本文链接：https://blog.csdn.net/GavinLi2588/article/details/103299653

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题：用JavaScript实现：当选择下拉框为大学时，隐藏下拉框，将大学对应的值显示到下面的span中：

实现代码如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function changeCheckType(){
				var cti = document.getElementById("checkTypeInfo");
				var ct = document.getElementById("checkType");
				var index = ct.selectedIndex;
				var sv = ct.options[index].value;
				if(sv=="02"){
					cti.innerHTML="小学生，拥有快乐的童年生活！！！"
					cti.style.display="";
					ct.style.display="none";
				}
				if(sv=="03"){
					cti.innerHTML="中学生活至关重要，压力也挺大，正是人生关键时刻，一定要挺住！！！"
					cti.style.display="";
					ct.style.display="none";
				}
				if(sv=="04"){
					cti.innerHTML="我是大学生，即将面对未来，走向社会！！！";
					cti.style.display="";
					ct.style.display="none";
				}
			}
		</script>
	</head>
	<body>
		<select id="checkType" onchange="changeCheckType();">
			<option value="00">请选择</option>
			<option value="02">小学</option>
			<option value="03">中学</option>
			<option value="04">大学</option>
		</select>
		<span id="checkTypeInfo" style="display: none; background-color: #00BBEE;"></span>
	</body>
</html>