前端笔记34——select标签

最新推荐文章于 2025-10-09 17:14:25 发布

原创最新推荐文章于 2025-10-09 17:14:25 发布 · 949 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#select #HTML #前端 #选择菜单

前端专栏收录该内容

93 篇文章

订阅专栏

本文深入讲解了HTML中select标签的使用方法，包括如何创建单选和多选菜单，以及不同属性如name、value、size和multiple的作用。通过实例代码展示了select和option标签的配合使用，帮助读者理解其在网页城市选择等场景中的应用。

前言

在日常使用网页的时候，我们肯定有选择过城市。那么网页中的选择城市是怎么实现的呢？下面我就为大家揭晓，它是通过select标签来实现的。

select标签

select 可以创建单选或多选菜单。

代码示例

代码中有做注释，有根据不同的情况进行演示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--select 和option标签连用 类似于ul li
			注意：name是加在select身上 value是加在option身上
			size表示可见选项的条数
			multiple 表示可以按住shift多选
		-->
		<select name="city" size="2" multiple>
			<!--这里加在value=北京 发送数据的时候 发送的就是北京-->
			<option value="北京">北京</option>
			<!--这里加在value="" 发送数据的时候就会发送的就是一个空的东西去-->
			<option value="">上海</option>
			<!--不写vluae 默认发送的就是option内部的东西-->
			<option >广州</option>
			<option >深圳</option>
		</select>
	</body>
</html>