Question

我有一个select元素，用户更改了选择。稍后我想以编程方式将select元素更改回其默认值。最好的方法是什么？我正在寻找一种在没有JQuery的情况下本地执行此操作的方法。

例如，如果选择是：

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

然后用户将选择更改为“Two”，但稍后我想将其更改回默认值“One”，我该怎么做？

Answer 1

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

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

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

jsFiddle demonstrating this.

请注意，这需要支持querySelector的现代浏览器。现在大部分都是这样，但是一些旧的浏览器不会。如果这是一个问题，您必须使用hasAttribute('selected')找到该元素。

Answer 2

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

请参阅其文档：Document Object Model (DOM) Level 2 - HTML Specification：

<强>接口HTMLOptionElement

  属性：
   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.

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

Answer 3

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

document.forms[0].reset();

比照。 MDN

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

Answer 4

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

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

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

Answer 5

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

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

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

JSFiddle

的演示

如果您正在寻找答案，请将此标记为答案！

Answer 6

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

Answer 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

上

除了我用于按钮“click”监听器的EventTarget.addEventListener（可以是shimmed）之外，这就像它的交叉浏览器一样。

Answer 8

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

// Set default value
var defaultValue = 0;

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

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

将HTML select元素本机设置为其默认值

8 个答案:

用法：