1

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

例如，如果选择是：

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

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

4

8 回答 8

5

This is not difficult to do if you understand that properties are different from attributes. Attributes (generally) don't change, but properties do. The selected attribute will always remain as it is in the original HTML, while the selected property will depend on what's happened to the element in the lifetime of the page.

So you can select the original selected element based on its selected attribute and then set its selected property.

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

jsFiddle demonstrating this.

Note that this requires a modern-ish browser that supports querySelector. This is most of them, these days, but some old browsers won't. If this is a problem, you will have to find the element using hasAttribute('selected').

于 2013-07-05T22:41:48.983 回答
5

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

请参阅其文档：文档对象模型 (DOM) 级别 2 - HTML 规范：

InterfaceHTMLOptionElement

Attributes:
defaultSelectedof typeboolean
          表示 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;
    }
}

示例小提琴在这里。

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

于 2013-07-05T22:48:19.763 回答
0

There is no straight way to do this. It is possible in the context of a reset of a whole form:

document.forms[0].reset();

Cf. MDN

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

于 2013-07-05T22:39:33.380 回答
0

If you want to be lazy, and it would fit the project, you can reload the page. If you want to reset the whole form, the answers below are much better than mine. But if you want to replace just one part, and I don't recommend this, the next best thing you can do is basically rewrite some of the functionality from JQuery from scratch.

I'm not sure exactly how Jquery's .click() function is written, but I imagine it uses get element by id and set inner html to do it.

You could get the select element by id, and reset it's html to the original html state.

于 2013-07-05T22:43:25.433 回答
0

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

于 2013-07-05T22:58:42.493 回答
0

使用 Javascript，您可以使用HTMLSelectElement.selectedIndex,HTMLOptionElement.defaultSelected和HTMLOptionElement.index. 循环optionsand 当你找到一个默认的然后将它的索引设置为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我用于按钮“单击”侦听器的（可以填充）之外，这与它所获得的跨浏览器差不多。

于 2013-07-05T23:19:48.310 回答
0

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

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

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

JSFiddle上的演示

如果这是您要找的，请将此标记为答案！

于 2013-07-05T22:50:38.280 回答
0

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

// Set default value
var defaultValue = 0;

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

// "Reset" selected value
select.options[defaultValue].selected = true;
于 2018-08-08T04:47:50.240 回答