Question

我有一些选择字段，但所有字段都具有相同的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 - ）？

Answer 1

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

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

＆＃13;

document.querySelector('#reset')
  .addEventListener('click', () => {
    document.querySelectorAll('select[name="works[]"]')
      .forEach(item => {
        item.value = '';
      });
  });

＆＃13;

<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>

＆＃13;

Answer 2

此代码将解决您的问题。此解决方案基于Javascript。

快乐编码

＆＃13;

function selectOne(){
  var select = document.getElementsByTagName('select');
  for(var i = 0;i<select.length;i++)
    {
      if(select[i].name == "works[]"){
        select[i].selectedIndex= "0";
      }
    }

}

＆＃13;

<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 onclick="selectOne()">Select First</button>

＆＃13;

Answer 3

$('#works')只会使用此ID返回dom中的第一个元素。

您可以使用名称设置所有字段：

$('name=works[]').val('')

这是jquery解决方案

清除具有相同ID的多个选择

3 个答案: