Angular 8原生<select>如何取消默认预选项（无需添加空选项）

嘿，这个问题问得很实际！先直接给结论：原生HTML的<select>元素本身默认会自动选中第一个<option>，这是HTML的原生行为规则，没法仅通过HTML标记实现“不选中任何选项且不加空选项”的效果，但我们可以用JavaScript轻松搞定这个需求，达到类似mat-select的效果。

具体实现方法 #

你只需要在页面加载完成后，通过JS将<select>的selectedIndex属性设置为-1即可，这样就会取消所有选项的选中状态，呈现出“无默认选中”的效果：

HTML代码

<select id="customSelect">
  <option value="option1">选项一</option>
  <option value="option2">选项二</option>
  <option value="option3">选项三</option>
</select>

JavaScript代码

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const selectEl = document.getElementById('customSelect');
  // 设置selectedIndex为-1，取消所有选中项
  selectEl.selectedIndex = -1;
});

注意事项 #

• 兼容性：这个方法在所有现代浏览器（Chrome、Firefox、Edge等）都能正常工作，甚至IE11也支持selectedIndex = -1的设置，不用担心兼容问题。
• 表单提交问题：如果这个<select>在表单里，当没有选中任何选项时，提交的表单数据中该字段的值会是空字符串，后端处理时需要考虑这种场景。
• 和mat-select的区别：mat-select是Angular Material封装的组件，它内部已经做了类似的逻辑处理，所以可以直接配置默认不选中；而原生<select>需要我们手动通过JS干预来实现相同效果。

内容的提问来源于stack exchange，提问作者Usr