经典方框选择页面H5代码

最新推荐文章于 2024-03-01 16:21:45 发布

全栈师

最新推荐文章于 2024-03-01 16:21:45 发布

阅读量1.4k

点赞数 1

文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_47777564/article/details/120058989

版权

实现效果为下图所示：
请添加图片描述
该页面H5代码为：

<!DOCTYPE html>
<meta charset="utf-8">
<html>

<head>
	<style>
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		div {
			font-family: "FangSong";
			margin-top: 50px;
			margin-left: 60px;
			border-radius: 25px;
			text-align: center;
			border: 2px solid #139CEA;
			padding: 20px;
			width: 800px;
			height: 100px;
		}
		li {
			padding: 2ch;
		}
	</style>
</head>

<body>
	<div>
		<ul>
			<li>选择你的地区</li>
			<select>
				<option value="111">惠城区</option>
				<option value="112">惠阳区</option>
				<option value="113">博罗县</option>
				<option value="114">惠东县</option>
				<option value="115">龙门县</option>
			</select>
			<button type="button" onclick="re_create(event.target)">提交</button>
		</ul>
	</div>
	<div>
		<ul>
			<li>选择你的年级</li>
			<select>
				<option value='116'>小学</option>
				<option value='117'>初中</option>
				<option value='118'>中专</option>
				<option value='119'>高中</option>
				<option value='120'>大学</option>
			</select>
			<button type="button" onclick="re_create(event.target)">提交</button>
		</ul>
	</div>
	<script type="text/javascript">
		function re_create(node) {
			ul = node.parentNode;
			var para = document.createElement("p");
			para.appendChild(document.createTextNode('已选：' + ul.children[1].value));
			ul.parentNode.appendChild(para);
			ul.remove();
		};
	</script>
</body>


</html>