HTML option 语法
在 HTML 中，option 标签主要有以下 3 个用途：
语法：
<!--用途1-->
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
<!--用途2-->
<input type="text" list="xxx">
<datalist id="xxx">
<option value="值1">选项1</option>
<option value="值2">选项2</option>
……
<option value="值n">选项n</option>
</datalist>说明：
当 option 标签用于定义下拉列表的选项时，它通常搭配 select 标签一起使用，并且它是作为 select 标签的子元素。
当 option 标签用于定义可选列表的选项时，它通常搭配 datalist 标签一起使用，并且它是作为 datalist 标签的子元素。
当 option 标签数量比较多时，可以使用 optgroup 标签对其进行分组。
option 标签属性有很多，常用的如下表所示。大多数情况下，我们都会使用到 value 属性。该属性定义用于提交给服务器处理的数据。
| 属性 | 说明 |
|---|---|
| value | 选项的值 |
| label | 选项的显示文本，默认为 value 属性的值 |
| selected | 是否选中 |
| disabled | 是否禁用 |
HTML option 摘要
| 属于 | HTML 下拉列表 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML option 示例
接下来，我们通过一个简单的例子来讲解一下 HTML option 标签是如何使用的。
示例 1：option 标签用于下拉列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
<label>
选择技术：
<select name="tech">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="vue">Vue</option>
<option value="react">React</option>
</select>
</label>
</form>
</body>
</html>页面效果如下图所示。
分析：
在 HTML 中，下拉列表是最节省页面空间的一种方式，因为它在默认情况下只显示一个选项，只有点击后才会看到全部选项。
当我们点击下拉列表后，全部选项就会显示出来，页面效果如下图所示。
示例 2：option 标签用于可选列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<label>选择语言：<input type="text" list="languages" name="tech"></label>
<datalist id="languages">
<option value="python">Python</option>
<option value="c">C</option>
<option value="cpp">C++</option>
<option value="java">Java</option>
<option value="javascript">JavaScript</option>
</datalist>
</body>
</html>页面效果如下图所示。
分析：
当文本框获取焦点时，页面效果如下图 1 所示。如果输入内容时，页面效果如下图 2 所示。
在上面例子中，datalist 包含 5 个选项："Python"、"C"、"C++"、"Java"、"JavaScript"。当我们输入文本时，会看到一个可选的下拉列表。你可以选择其中一个选项，或者继续输入自己的文本。
示例 3：option 标签搭配 optgroup 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<label>
选择食物：
<select name="food">
<optgroup label="水果">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="watermelon">西瓜</option>
</optgroup>
<optgroup label="蔬菜">
<option value="tomato">番茄</option>
<option value="potato">土豆</option>
<option value="cabbage">白菜</option>
</optgroup>
</select>
</label>
</body>
</html>默认情况下，页面效果如下图 1 所示。当点击下拉列表时，页面效果如下图 2 所示。
