HTML selected 语法
在 HTML 中，selected 是一个布尔属性，用于指定 option 元素在页面加载时是否应被默认选中。只有 option 元素支持 selected 属性。
语法：
<option selected>选项内容</option>说明：
selected 是一个布尔属性，这意味着它的存在即表示该属性为 true。在 HTML5 中，以下两种写法是等价的。
<!--写法1-->
<option selected>
<!--写法2-->
<option selected="selected">不同下拉列表，selected 属性的使用是不一样的：
- 对于 “单选型” 下拉菜单，只能有一个 option 设置 selected。如果设置了多个，则浏览器只会选中最后一个。
- 对于 “多选型” 下拉菜单（即设置了 multiple 属性），可以有多个 option 同时设置 selected，表示默认选中这些项。”
什么是布尔属性？
布尔属性（Boolean Attributes），是一种特殊的 HTML 属性。它们的存在本身就表示一个 true（真）值，而它们的缺失则表示 false（假）值。这些属性不需要显式赋值（如 true 或 false），只要属性名存在即可。
就拿 required 属性来说：
<input type="text" required>：表示这个文本输入框是 “必填” 的。<input type="text">：表示这个文本输入框是 “非必填” 的。
对于布尔属性来说，虽然下面 2 种写法是等价的。但 HTML5 更加推荐写法 1（即只写属性名、不带任何值）
<!--写法1：推荐-->
<input type="text" required>
<!--写法2-->
<input type="text" required="required">注意，下面这种写法是错误的。
<!--错误写法-->
<input type="text" required="true">其中，常见的布尔属性有：
- autofocus：页面加载时，元素自动获得焦点。
- hidden：是否隐藏元素。
- checked：是否选中，用于单选按钮和复选框。
- disabled：是否禁用。
- readonly：是否只读。
- required：是否必填，用于 input、textarea 和 select 元素。
- selected：是否选中，用于 option 元素。
- multiple：是允许多选，用于 input 和 select 元素。
- novalidate：是否跳过内置的验证功能，用于 form 元素。
- autoplay：是否自动播放，用于 audio 和 video 元素。
- loop：是否循环播放，用于 audio 和 video 元素。
HTML selected 摘要
| 适用元素 | option |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML selected 示例
接下来，我们通过几个简单的例子来讲解一下 HTML selected 属性是如何使用的。
示例 1：selected 属性的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="/submit" method="post">
<p>
<label>
选择城市：
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou" selected>广州</option>
<option value="shenzhen">深圳</option>
</select>
</label>
</p>
<p>
<button type="submit">提交</button>
</p>
</form>
</body>
</html>页面效果如下图所示。
分析：
当页面加载时，下拉列表中 “广州” 选项将默认被选中并显示出来，而无需我们手动选择。如果我们不进行任何操作，提交表单时 “广州” 的值（即 guangzhou）将被发送。
示例 2：selected 属性配合 multiple 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="/submit" method="post">
<p>
<label>
请选择喜欢的水果（可多选）：
<select name="fruits" size="4" multiple>
<option value="apple">苹果</option>
<option value="banana" selected>香蕉</option>
<option value="orange">橙子</option>
<option value="grape" selected>葡萄</option>
<option value="strawberry">草莓</option>
</select>
</label>
</p>
</form>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们为 select 元素设置了 multiple 属性，从而允许用户选择多个选项。然后，再为 “香蕉” 和 “葡萄” 这两个选项添加 selected 属性。因此在页面加载后，可以看到这两个选项处于被选中的状态。
示例 3：JavaScript 动态设置 selected 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="/submit" method="post">
<p>
<label>
请选择国家：
<select name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="frence">法国</option>
<option value="germany">德国</option>
<option value="england">英国</option>
</select>
</label>
</p>
</form>
<script>
const selectElement = document.querySelector('select[name="country"]');
// 获取值是 "germany" 的选项，并将其设置为选中
if (selectElement) {
for (let i = 0; i < selectElement.options.length; i++) {
if (selectElement.options[i].value === 'germany') {
selectElement.options[i].selected = true;
break;
}
}
}
</script>
</body>
</html>页面效果如下图所示。
分析：
虽然 selected 属性用于在 HTML 中设置初始状态，但我们也可以通过 JavaScript 动态修改它的值，以响应用户的交互或根据数据更新表单。
在这个例子中，当页面加载时，country 下拉列表默认会显示 “中国”。但我们使用了 JavaScript 对 selected 属性进行设置，因此它会找到 value 为 "germany" 的选项并将其 selected 属性设置为 true。因此，最终看到的选中项是 “德国”。
