如何使用 HTML ｓｅｌｅｃｔ 标签

ｓｅｌｅｃｔ 标签用于在 HTML 网页中创建下拉列表。它允许用户从预定义的选项列表中进行选择。

语法

<ｓｅｌｅｃｔ name="option_name"><option value="value1">Option 1</option><option value="value2" selected>Option 2</option><option value="value3">Option 3</option></ｓｅｌｅｃｔ>

属性

立即学习“前端免费学习笔记（深入）”；

• name: 必填属性，指定下拉列表的名称。
• multiple: 布尔属性，指示是否允许用户选择多个选项。默认值为 false。
• required: 布尔属性，指示下拉列表是否必填。默认值为 false。
• size: 指定下拉列表可见的选项数量。默认值为 1。
• selected: 布尔属性，用于预先选择选项。

选项

每个 ｓｅｌｅｃｔ 标签包含一个或多个 option 元素。每个选项都有一个 value 属性，指定其值，以及一个文本内容，显示给用户。

示例

创建具有三个选项的下拉列表：

<ｓｅｌｅｃｔ name="fruits"><option value="apple">Apple</option><option value="banana" selected>Banana</option><option value="orange">Orange</option></ｓｅｌｅｃｔ>

用户可以选择 "Banana" 选项，因为 selected 属性已设置为此选项。

事件

ｓｅｌｅｃｔ 标签支持以下事件：

• onchange: 当用户更改选择时触发。
• onfocus: 当用户获得下拉列表焦点时触发。
• onblur: 当用户失去下拉列表焦点时触发。

提示

• 使用 size 属性来控制下拉列表中可见的选项数量。
• 使用 multiple 属性来允许用户选择多个选项。
• 使用 required 属性来强制用户选择一个选项。
• 为每个 option 元素指定一个唯一的 value 属性。