如何清除多个拥有相同ID的select选择框的选中状态？

嘿，我注意到你碰到了一个挺常见的小问题——页面里多个<select>表单用了同一个ID works，这其实是不符合HTML标准的哦，ID在整个页面里必须是唯一的标识。不过别急，我给你两种方案来搞定清除选中状态的需求：

方案1：临时处理现有重复ID的情况（不推荐长期使用） #

因为浏览器的getElementById方法只会返回第一个匹配到的元素，所以要选中所有ID为works的<select>，得用属性选择器来实现：

原生JavaScript实现 #

// 选中所有id属性为works的select元素
const allWorksSelects = document.querySelectorAll('[id="works"]');
// 遍历每个select，将选中值设为空（对应你默认的"-select-"选项）
allWorksSelects.forEach(select => {
  select.value = '';
});

jQuery实现（如果项目里用了jQuery） #

$('[id="works"]').val('');

方案2：修正HTML结构（推荐的规范做法） #

既然ID重复本身就不规范，不如直接把ID改成class，这样既符合标准，后续维护也更省心。修改后的HTML会是这样：

<select class="works" name="works[]">
  <option selected="" value="">-select-</option>
  <option value="A">A</option>
  <!-- 其他选项 -->
</select>
<select class="works" name="works[]">
  <option selected="" value="">-select-</option>
  <option value="D">D</option>
  <!-- 其他选项 -->
</select>

然后清除选中状态的代码就更直观了：

原生JavaScript实现 #

const allWorksSelects = document.querySelectorAll('.works');
allWorksSelects.forEach(select => {
  select.value = '';
});

jQuery实现 #

$('.works').val('');

为什么推荐方案2呢？因为ID唯一是HTML的基础规则，不遵守的话很容易在后续开发中踩坑——比如CSS样式只作用在第一个元素，或者JS获取元素时出现意料之外的错误，所以尽量修正结构才是长久之计哦。

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