Javascript选择选择列表的第一个选项答案

【问题标题】：Javascript to select first option of select listJavascript选择选择列表的第一个选项
【发布时间】：2012-03-21 08:03:15
【问题描述】：

我需要创建一个重置按钮，单击该按钮会将表单中的所有选择列表设置为索引 0。我已经尝试了此代码的功能，但它在 myForm.length 上给出了语法错误；

<script type="text/javascript">function ResetForm(form) {     
var myForm = document.forms[form];   
  for( var i=0; i < myForm.length; i++ ){                                   
myForm.select[i].selectedIndex =0;     }  }

</script>

【问题讨论】：

标签： select reset

【解决方案1】：

没有someForm.select这样的属性，试试这个：

selectTags = myForm.getElementsByTagName("select");

for(var i = 0; i < selectTags.length; i++) {
  selectTags[i].selectedIndex =0;
}

【讨论】：

selectElement.selectedIndex = 0;

【解决方案2】：

您可能会发现 jquery 在这里很有用。这应该可以解决问题...

$(function()
{
    $('.resetButton').click(function()
    {
        $(this).closest('form').find('select').each(function()
        {
            $(this)[0].selectedIndex=0;
        });
    });
});

<input type="reset" class="resetButton" />

【讨论】：

【解决方案3】：

这将在更改为第一个选项后直接设置每个选择：

    <select onchange="your_selection_func(); this.selectedIndex=0;">

【讨论】：

【解决方案4】：

我意识到这有点旧，但想改进 teh1 的答案。当您要从中获取 DOM 元素时，没有理由从“this”创建 jQuery 对象：

$(this).closest('form').find('select').each(function() {
    this.selectedIndex = 0;
});

【讨论】：

【解决方案5】：

您只需设置.selectedIndex 属性，如mySelect.selectedIndex = 0;。试试下面的例子。

var doc = document;
var myCheckbox = doc.getElementById('my-checkbox');
var mySelect = doc.getElementById('my-select');

myCheckbox.addEventListener("click", function(e){
  if (this.checked){
    mySelect.disabled = false;     
  } else {
    mySelect.selectedIndex = 0;
    mySelect.disabled = true;     
  }
});

<label><input type="checkbox" id="my-checkbox" value=""> Enable Dropdown</label><br>

<select id="my-select" disabled>
  <option class="placeholder" selected disabled value="">Select credential</option>
  <option value="apples">apples</option>
  <option value="oranges">oranges</option>
  <option value="bananas">bananas</option>
</select>

【讨论】：

【解决方案6】：

我发现了一些技巧：

<select onchange="doSomething()">
  <option value="a" selected disabled hidden>a</option>
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="…">…</option>
</select>

selected disabled hidden 的组合导致（视觉上）第一个选项响应 change 事件（即使是相同的 value！）。

使用 IE、Edge、Opera、Chrome，但不在 FF 中工作:(

【讨论】：

【解决方案7】：

罗恩·罗伊斯顿 (Ron Royston) 的简短回答（我只在 Chrome 74.0 上尝试过）

如果禁用该选项，则设置 mySelect.selectedIndex = 0; 或 $('#mySelect').prop("selectedIndex", 0); 将不起作用。

希望这可以节省一些时间和挫败感！

【讨论】：