HTML 参考手册 目录

HTML <option> selected 属性

在 HTML 的 元素中,

1. 语法

<option selected>Option 1</option>

在上面的例子中,Option 1 会在下拉菜单中默认被选中。

2. 使用场景

2.1 默认选项

当页面加载时,有时候我们希望下拉菜单中的某个选项被默认选中。这时就可以使用 selected 属性。

<select> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> </select>

在上面的例子中,Option 2 会在页面加载时被默认选中。

2.2 根据后端数据设置默认选项

有时候,我们需要根据后端返回的数据来设置下拉菜单中的默认选项。这时,可以使用 JavaScript 动态设置 selected 属性。

<select id="mySelect"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>

<script> const mySelect = document.getElementById('mySelect'); const defaultValue = 2; // 从后端获取的默认值 mySelect.value = defaultValue; mySelect.querySelector([value="${defaultValue}"]).selected = true; </script>

在上面的例子中,根据后端返回的默认值,Option 2 会被设置为默认选中。

3. 注意事项

  • 当设置多个
  • 如果没有设置 selected 属性,下拉菜单将不会有默认选中的选项。

通过本篇文章的学习,相信你已经掌握了 HTML


下一篇:HTML 标签列表(字母排序)