时间戳

首页 > 解决方案 > 清除具有相同 ID 的多选

javascript - 清除具有相同 ID 的多选

问题描述

我有一些选择字段，但它们都具有相同的 ID。

<select id="works" name="works[]">
    <option selected="" value="">-select-</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

<select id="works" name="works[]">
    <option selected="" value="">-select-</option>
    <option value="D">D</option>
    <option value="E">E</option>
    <option value="F">F</option>
</select>

我应该如何添加将所有具有相同 ID/名称的选择设置为第一个选项 (-select-) 的按钮？

标签： javascripthtml

解决方案

HTML 页面中元素的 ID 应该是唯一的，以避免任何不必要的错误。

要解决您的问题，您可以按名称选择下拉列表，然后将值设置为''（value第一个option标签的）。

document.querySelector('#reset')
  .addEventListener('click', () => {
    document.querySelectorAll('select[name="works[]"]')
      .forEach(item => {
        item.value = '';
      });
  });
<select id="works" name="works[]">
  <option selected="" value="">-select-</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<select id="works" name="works[]">
  <option selected="" value="">-select-</option>
  <option value="D">D</option>
  <option value="E">E</option>
  <option value="F">F</option>
</select>

<button id="reset">Reset</button>

推荐阅读