在 HTML 的 <select> 元素中，<option> 元素用于定义下拉菜单中的选项。通过使用 selected 属性，可以设置一个默认被选中的选项。在本篇文章中，我们将深入探讨 <option> 元素的 selected 属性，以及如何在 web 前端开发中使用它。
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. 注意事项
- 当设置多个 <option> 元素的 selected 属性时，只有第一个会生效。
- 如果没有设置 selected 属性，下拉菜单将不会有默认选中的选项。
通过本篇文章的学习，相信你已经掌握了 HTML <option> 元素的 selected 属性的用法和注意事项。在实际项目中，根据需求合理设置默认选项，可以提升用户体验。