【前端】【HTML+CSS+JavaScript(JS)】＜select＞标签添加onchange事件的应用

最新推荐文章于 2024-07-28 21:26:51 发布

_小鹰

最新推荐文章于 2024-07-28 21:26:51 发布

阅读量910

点赞数

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

本文链接：https://blog.csdn.net/cc2855816075/article/details/122888320

版权

前端专栏收录该内容

38 篇文章 1 订阅

订阅专栏

这是一个简单的HTML页面示例，展示了如何通过JavaScript实现当用户从下拉菜单中选择一个项时，该选择自动填充到文本区域。代码中定义了一个样式和JavaScript函数，使得在`honer-of-kings`选择器更改时，触发`fun1()`函数，将所选英雄的台词显示在`txtarea`中。

摘要由CSDN通过智能技术生成

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业3</title>
	</head>
	<body>
		<style type="text/css">
			
			#b-box{
				margin-top: 200px;
				text-align: center; 
				border: 0px solid #464646;
				height: 100px;
				position: relative;
			}
			#slt1{
				display: inline-block;
				position: absolute;
				right: 870px;
			}
			#ta1{
				display: inline-block;
				margin-top: 3px;
			}
		</style>
		
		<script type="text/javascript">
			function fun1(){
				var res = document.getElementById("honer-of-kings").value;
				document.getElementById("txtarea").value = res;
			}
		</script>
		
		<div id="b-box">
			<div id="slt1">
				<select id="honer-of-kings" onchange="fun1()">
					<option value="干他！">程咬金</option>
					<option value="唯朕独尊！">嬴政</option>
					<option value="听命自己！">杨戬</option>
					<option value="我一人主宰！">吕布</option>
					<option value="翱翔于天际！">赵云</option>
					<option value="更强大！">哪吒</option>
				</select>
			</div>
			<div id="ta1">
				<textarea rows="2" cols="20" id="txtarea" style="resize: none;"></textarea>
			</div>
		</div>
	</body>
</html>