option 与 selection 的区别

在 HTML 表单开发中，<option> 和 selection 是两个常被混淆的概念。它们虽然都与“选择”相关，但作用完全不同。

1. <option> 是什么？

<option> 是 HTML 标签，用于定义下拉列表（<select>）中的一个可选项。

<select>
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

每个 <option> 代表用户可以选择的一个值。

2. selection 是什么？

selection 并不是 HTML 标签，而是指用户在网页中选中文本的行为或结果。在 JavaScript 中，可以通过 window.getSelection() 获取当前选中的文本内容。

// 获取用户选中的文本
const selectedText = window.getSelection().toString();
console.log(selectedText);

这通常用于富文本编辑、复制功能或高亮操作，与表单控件无关。

3. 主要区别总结

• 类型不同：<option> 是 HTML 元素；selection 是用户交互行为或 DOM API 概念。
• 用途不同：<option> 用于构建下拉菜单；selection 用于获取或操作页面中被选中的文本。
• 上下文不同：<option> 出现在 <select> 内部；selection 可发生在任何可选中文本区域（如段落、输入框等）。

4. 常见误区

很多人误以为 “selection” 是 <select> 的缩写，其实 <select> 才是下拉选择控件的标签，而 selection 指的是“选区”或“选中状态”。