使用 defaultValue 或 value 道具而不是设置selected

在HTML表单中，我们通常使用<select>元素来提供一个选项列表。同时，<select>元素也包含<option>子元素来定义可选项。

当我们想要在页面加载时预先选择一个选项时，我们有两种方式：一种是预先为<option>元素添加selected属性，另一种是设置<select>元素的defaultValue或value属性。

本文将介绍为何应该使用defaultValue或value属性来预先选择一个选项，而不是设置selected属性。

使用selected属性可能会导致问题

一些开发人员选择在<option>元素中设置selected属性来预先选择一个选项。这种方法可能会导致以下问题：

• 当我们需要动态更改选择的选项时，使用selected属性将导致更新操作变得更加困难。
• 如果有多个<option>元素具有相同的value值，则最后一个带有selected属性的元素将被选中。这可能导致意想不到的行为。

因此，我们应该使用defaultValue或value属性来预先选择一个选项。

使用defaultValue属性

我们可以使用defaultValue属性来预先选择一个选项。假设我们有以下的<select>元素和选项：

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

我们可以使用以下代码来预先选择第二个选项：

const select = document.getElementById("mySelect");
select.defaultValue = "option2";

这将在页面加载时选择第二个选项。

使用value属性

我们还可以使用value属性来预先选择一个选项。假设我们有以下的<select>元素和选项：

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

我们可以使用以下代码来预先选择第二个选项：

const select = document.getElementById("mySelect");
select.value = "option2";

这将在页面加载时选择第二个选项。

总结

使用defaultValue或value属性来预先选择一个选项可以避免使用selected属性可能导致的问题。同时，这种方式也更加易于动态更新选择的选项。

因此，在实际开发中，我们应该避免在<option>元素中使用selected属性，而是使用defaultValue或value属性来预先选择一个选项。