在 HTML 中创建下拉菜单

下拉菜单（Dropdown）是网页设计中常见的一个组件，用于让用户从多个选项中选择一个。在 HTML 中创建下拉菜单非常简单，下面我们将一步步介绍如何创建一个简单的下拉菜单。

基本结构

首先，让我们来看一下下拉菜单的基本结构：

<select>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
  <option value="option4">选项4</option>
</select>

在这个例子中，select 元素定义了下拉菜单，里面的 option 元素定义了下拉菜单中的选项。value 属性定义了每个选项的值，而文本内容则是选项的显示文本。

添加选项

要向下拉菜单中添加选项，只需在 select 元素中添加新的 option 元素即可：

<select>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
  <option value="option4">选项4</option>
  <option value="option5">选项5</option>
</select>

选中选项

如果您想让某个选项在初始时被选中，只需在该选项的 option 元素上添加 selected 属性即可：

<select>
  <option value="option1">选项1</option>
  <option value="option2" selected>选项2</option>
  <option value="option3">选项3</option>
  <option value="option4">选项4</option>
  <option value="option5">选项5</option>
</select>

分组选项

如果您希望将选项分组，可以使用 optgroup 元素：

<select>
  <optgroup label="颜色">
    <option value="red">红色</option>
    <option value="green">绿色</option>
    <option value="blue">蓝色</option>
  </optgroup>
  <optgroup label="尺寸">
    <option value="large">大</option>
    <option value="medium">中</option>
    <option value="small">小</option>
  </optgroup>
</select>

在这个例子中，第一个 optgroup 元素用于分组颜色选项，第二个用于分组尺寸选项。

属性

除了 value 属性外，下拉菜单还有其他一些常用的属性：

• disabled：禁用下拉菜单
• multiple：允许选择多个选项
• size：指定下拉菜单中可见选项的数量
• name：指定下拉菜单的名称，用于提交表单数据

总结

在 HTML 中创建下拉菜单非常简单，只需使用 select 和 option 元素即可。通过设置 value 属性和 selected 属性，您可以控制下拉菜单中哪个选项被选中。如果您想要分组选项，可以使用 optgroup 元素。