在 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