HTML 如何为HTML select设置默认值

在本文中，我们将介绍如何为HTML select元素设置默认值。

阅读更多：HTML 教程

设置默认值的方法

HTML提供了多种方法来设置select元素的默认值。接下来，我们将介绍三种常见的方法。

1. 使用selected属性

使用selected属性是最简单的方法之一。通过在option元素中添加selected属性，可以将该选项设置为默认选中。

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

在上述示例中，”选项2″将会被设置为默认选中。

2. 使用JavaScript

通过使用JavaScript，我们可以在页面加载完成后动态地设置select元素的默认选中项。以下是一个使用JavaScript设置默认值的示例：

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

<script>
  document.getElementById("mySelect").value = "option2";
</script>

在上述示例中，JavaScript代码将”选项2″设置为默认选中。

3. 使用CSS

我们还可以使用CSS来设置select元素的默认选中项。通过设置option元素的样式，我们可以实现这一目标。以下是一个使用CSS设置默认值的示例：

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

<style>
  #mySelect option[value="option2"] {
    background-color: yellow;
  }
</style>