给出选项 HTML

在 Web 开发中，经常需要创建一些可选项供用户选择，例如选择性别、选择日期等。而 HTML 中的 <select> 元素和 <option> 元素就是用来提供可选项的。

<select> 元素

<select> 元素用来创建下拉菜单。其语法如下：

<select>
  <option value="value1">option1</option>
  <option value="value2">option2</option>
  <option value="value3">option3</option>
  ...
</select>

<option> 元素为 <select> 元素提供了一系列可选项。<option> 元素语法如下：

<option value="value">text</option>

其中，value 属性是可选项的值，text 是可选项显示的文本。

<optgroup> 元素

<optgroup> 元素用来将 <option> 元素进行分组。其语法如下：

<select>
  <optgroup label="group1">
    <option value="value1">option1</option>
    <option value="value2">option2</option>
    ...
  </optgroup>
  <optgroup label="group2">
    <option value="value3">option3</option>
    <option value="value4">option4</option>
    ...
  </optgroup>
  ...
</select>

其中，label 属性是分组的名称。

属性

以下是常用的 <select> 元素和 <option> 元素的属性。

<select> 元素属性

| 属性名 | 描述 | | --- | --- | | multiple | 值为 true 时，可多选 |

<option> 元素属性

| 属性名 | 描述 | | --- | --- | | value | 可选项的值 | | selected | 值为 true 时，表示默认选中 |

示例代码

<!-- 普通下拉菜单 -->
<select>
  <option value="value1">option1</option>
  <option value="value2">option2</option>
  <option value="value3">option3</option>
</select>

<!-- 下拉菜单，可多选 -->
<select multiple>
  <option value="value1">option1</option>
  <option value="value2">option2</option>
  <option value="value3">option3</option>
</select>

<!-- 有分组的下拉菜单 -->
<select>
  <optgroup label="group1">
    <option value="value1">option1</option>
    <option value="value2">option2</option>
  </optgroup>
  <optgroup label="group2">
    <option value="value3">option3</option>
    <option value="value4">option4</option>
  </optgroup>
</select>

以上是 HTML 中给出选项的几种常见方式，开发者在实际开发中可以灵活运用。