在 HTML 中选择默认值

本文介绍如何将 HTML 下拉列表中的某个选项设为初始选项。将 selected 属性添加到 <select> 内目标 <option> 上。你可以为该属性指定明确的值，也可以使用不带值的布尔形式。下面两个示例使用相同的选项和值，方便直接比较这两种写法。

使用 selected="selected" 设置默认选项

在页面首次加载时应被选中的选项的开始标签中写入 selected="selected"。该属性应放在 <option> 上，而不是 <select> 上，也不是写在单独的 <selected> 标签中。在此示例中，第三个选项会被初始选中，其提交值为 3。

被选中的选项仍保持在列表中的原有位置。添加该属性只会设置初始选项，不会将该选项移到其他选项前面。使用页面的人仍可选择其他选项，所选内容会随之更新。

name 属性为控件指定表单字段名称；提交表单时，被选中选项的 value 会作为该字段的值。标签通过匹配的 for 和 id 值与控件关联，因此使用辅助技术的人也能理解所选值的含义。如果页面需要以其他选项作为初始选项，请将 selected 属性移到该选项上。

下面的 HTML 是静态标记示例，用于展示页面源码，并非执行结果。

<label for="number">Choose a number:</label>
<select id="number" name="number">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" selected="selected">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

这个可运行的 JavaScript 示例模拟了标记中的选项值，并报告带有 selected 标记的选项所对应的值。HTML 示例展示的是浏览器中的实际标记行为。

const options = [
  { value: "1", selected: false },
  { value: "2", selected: false },
  { value: "3", selected: true },
  { value: "4", selected: false },
  { value: "5", selected: false },
];

const initialValue = options.find((option) => option.selected).value;
console.log(initialValue);

3

使用布尔型 selected 属性

selected 是布尔属性：只要该属性存在，相应选项就会被初始选中。在 HTML 中，可以省略属性值，写成 selected；也可以像上文一样写成 selected="selected"。在这里，两种写法表示相同的选择；属性名称必须保持为 selected。

在这个对应示例中，第二个选项是初始选项。它的 value 为 2，显示给读者的文字是 Two。为每个选项设置 value，可以让表单值与显示标签清楚地区分开来。如果读者在更改选项前提交表单，提交的就是当前选中选项的值。示例中的显示文字 Two 保持为英文。

如果希望 HTML 更简洁，可以使用这种布尔形式。将它添加到你要选中的那个选项的开始标签中即可。不要在选项后面写 <selected>：这不是该属性的写法。选项仍会保持在列表中的原有位置，读者也仍可选择其他值。

这同样是静态标记示例，并非运行时输出。

<label for="number-short">Choose a number:</label>
<select id="number-short" name="number">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>