本机将 HTML 选择元素设置为其默认值答案

【问题标题】：Natively set HTML select element to its default value本机将 HTML 选择元素设置为其默认值
【发布时间】：2018-08-08 12:47:50
【问题描述】：

我有一个选择元素，用户更改了选择。稍后我想以编程方式将选择元素更改回其默认值。最好的方法是什么？我正在寻找一种无需 JQuery 的本地方法。

例如，如果选择是：

<select id='select'>
  <option value='one' selected=true>One</option>
  <option value='two'>Two</option>
  <option value='three'>Three</option>
</select>

用户将选择更改为“二”，但后来我想将其更改回默认值“一”，我该怎么做？

【问题讨论】：

据我所知，HTML不是一种语言，是一种文本表示法，没有html编程。而且我认为正确的方法是selected =“selected”。您只能将表单框起来并重新加载它，将重置选择。
您可以在不使用 jQuery 的情况下轻松应用解决方案 provided here。

标签： javascript html

【解决方案1】：

如果您了解属性与属性不同，这并不难做到。属性（通常）不会改变，但属性会改变。 selected 属性将始终保持其在原始 HTML 中的状态，而 selected 属性将取决于页面生命周期中元素发生的情况。

因此您可以根据其selected属性选择原始选定元素，然后设置其selected属性。

document.querySelector('option[selected]').selected = true;

jsFiddle demonstrating this.

请注意，这需要支持querySelector 的现代浏览器。这些天，这是其中的大多数，但一些旧浏览器不会。如果这是一个问题，您将不得不使用 hasAttribute('selected') 查找元素。

【讨论】：

Browsers That Support querySelector 在 jQuery 之外选择元素有多种替代解决方案，可能应该提到。 Sizzle 可能仍然适用，即使 jQuery 的其余部分不适用。
这会选择默认选择的选项，但不会取消选择以后选择的任何选项。如果使用 <select multiple>!，这一点很重要

【解决方案2】：

您可以使用<option> 元素的defaultSelected 属性。

查看其文档：Document Object Model (DOM) Level 2 - HTML Specification:

InterfaceHTMLOptionElement

属性：
defaultSelected 类型为 boolean
表示 HTML selected 属性的值。 如果交互式用户代理中相应表单控件的状态发生更改，则此属性的值不会更改。

也就是说，它表示option是否默认被选中。

用法：

var mySelect = document.getElementById("select");
// selects default
for (var i = 0; i < mySelect.options.length; i++) { 
    if (mySelect.options[i].defaultSelected) {
        mySelect.selectedIndex = i;
        break;
    }
}

Example fiddle here.

_{注意：只是没有人说我没有这样说：它可以通过编程方式设置，但是这样做是非常愚蠢的。}

【讨论】：

不是下拉菜单，可以更改。我的意思是defaultSelected 属性。它不像人们所期望的那样是只读的，因此您可以更改它。（更改 defaultSelected 属性会很愚蠢，因为人们可能希望这样的属性反映默认选择的选项，而 that 不会改变。）你知道，原来的 @ 987654333@ 属性也可以更改，所以这里没有缺点。
对于那些比for更喜欢这个的人，这里有一个更紧凑的代码版本：jsfiddle.net/jmvsN/1

【解决方案3】：

没有直接的方法可以做到这一点。在整个形式的reset 的上下文中是可能的：

document.forms[0].reset();

参照。 MDN

http://jsfiddle.net/jX4m5/2/

【讨论】：

【解决方案4】：

如果你想偷懒，并且它适合项目，你可以重新加载页面。如果你想重置整个表格，下面的答案比我的要好得多。但是如果你只想替换一个部分，我不推荐这样做，你可以做的下一个最好的事情基本上是从头开始重写 JQuery 的一些功能。

我不确定 Jquery 的 .click() 函数是如何编写的，但我想它使用 get element by id 和 set inner html 来完成。

你可以通过 id 获取 select 元素，并将它的 html 重置为原始的 html 状态。

【讨论】：

在各种不同的情况下不希望使用 jQuery 的原因有很多。

【解决方案5】：

使用直接的 Javascript，假设下拉列表的默认值是列表中的第一个选项，您可以执行以下操作：

<button onclick='javascript:document.getElementById("select").options[0].selected=true'>Set to default</button>

这会将 ID 为“select”的元素设置为选中它的第 0 个索引选项。

JSFiddle的演示

如果这是您要查找的内容，请将其标记为答案！

【讨论】：

【解决方案6】：

您可以保存 defaultSelectedIndex 并手动重置它。
在这种情况下，不要忘记在 select 上触发 'onchange' 事件。
Pure JS example

【讨论】：

【解决方案7】：

使用 Javascript，您可以使用 HTMLSelectElement.selectedIndex、HTMLOptionElement.defaultSelected 和 HTMLOptionElement.index。循环options，当你找到默认的那个时，将其索引设置为select。

HTML

<select id='select'>
  <option value='one' selected=true>One</option>
  <option value='two'>Two</option>
  <option value='three'>Three</option>
</select>
<button id="reset">Reset</div>

Javascript

document.getElementById("reset").addEventListener("click", function () {
    var select = document.getElementById("select"),
        option = select.options.item(0);

    while (option)  {
        if (option.defaultSelected) {
            select.selectedIndex = option.index;
            break;
        }

        option = option.nextElementSibling;
    }
}, false);

开启jsfiddle

除了我用于按钮“单击”侦听器的EventTarget.addEventListener（可以填充）之外，这几乎是跨浏览器。

【讨论】：

【解决方案8】：

这里是 JavaScript 中最简单的形式，根据要求。我知道这已经晚了好几年，但这可能会在某些时候对某人有所帮助。我也遇到了这个问题，所以我想我会发布。

// Set default value
var defaultValue = 0;

// Get Select Object
const select = document.getElementById('mySelect');

// "Reset" selected value
select.options[defaultValue].selected = true;

【讨论】：