Natively set HTML select element to its default value

Question

I have a select element and the user changes the selection. Later I want to programmatically change the select element back to its default value. What's the best way to do this? I am looking for a way to do this natively, without JQuery.

For example if the select is:

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

And the user changes the selection to "Two" but later I want to change it back to the default value of "One" how would I do this?

As far I know, HTML is not a language, is a text notation, there is no html programming. And I think the right way is selected="selected". You can only put the form framed and reload it, will reset the select. — Gustavo, Jul 05 '13 at 22:39
You can apply the solutions [provided here](http://stackoverflow.com/questions/16913094/reset-select-value-to-default) easily without jQuery. — Felix Kling, Jul 08 '13 at 12:46

score 5 · Accepted Answer · answered Jul 05 '13 at 22:41

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').

[Browsers That Support querySelector](http://caniuse.com/#search=queryselector) There are multiple alternative solutions for selecting elements outside of jQuery that should probably be mentioned. [Sizzle](http://sizzlejs.com/) might still be suitable even if the rest of jQuery is not. — Corion, Jul 05 '13 at 22:47
This selects the default selected option(s), but doesn't un-select any that were selected later. This is important if using a ` — Doin, Oct 11 '19 at 15:14

score 5 · Answer 2 · edited Jun 20 '20 at 09:12

5

You can use the defaultSelected property of the <option> element.

See its documentation: Document Object Model (DOM) Level 2 - HTML Specification:

InterfaceHTMLOptionElement

Attributes:
defaultSelected of type boolean
Represents the value of the HTML selected attribute. The value of this attribute does not change if the state of the corresponding form control, in an interactive user agent, changes.

So, in other words, it indicates whether the option is selected by default or not.

Usage:

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.

_{Note: Just so nobody says I didn't say this: It can be set programmatically, but, that would be a very stupid thing to do.}

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 05 '13 at 22:48

acdcjunior

132,397
37
331
304

Not the dropdown, that's ok to change. I meant the `defaultSelected` property. It is not read-only as one might expect, so you could change it. (It would be stupid to change the `defaultSelected` property because, well, people probably expect that such a property reflects the default selected option and *that* does not change.) Just so you know, the original `selected` attribute could also be changed, so no disadvantage here. – acdcjunior Jul 06 '13 at 00:03
For those who prefer this over the `for`, here's a more compact version of the code: http://jsfiddle.net/jmvsN/1/ – acdcjunior Jul 06 '13 at 00:32

score 0 · Answer 3 · answered Jul 05 '13 at 22:39

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/

answered Jul 05 '13 at 22:39

Thomas Junk

5,588
2
30
43

score 0 · Answer 4 · answered Jul 05 '13 at 22:43

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.

There are all kinds of reasons why using jQuery is not desirable in various different cases. — lonesomeday, Jul 05 '13 at 22:44

score 0 · Answer 5 · answered Jul 05 '13 at 22:50

Using straight Javascript, assuming that the default value of the dropdown is the first option in the list, you can do something like:

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

This will set the element with the ID "select" to have it's 0'th indexed option set to selected.

Demonstration at JSFiddle

Please mark this as the answer if it is what you were looking for!

Serg Hospodarets · Answer 6 · 2013-07-05T23:07:13.193

0

You can save defaultSelectedIndex and reset it manually.
And don't forget to trigger 'onchange' event on select in this case.
Pure JS example

edited Jul 05 '13 at 23:07

answered Jul 05 '13 at 22:58

Serg Hospodarets

4,658
4
25
31

Xotic750 · Answer 7 · 2013-07-05T23:39:43.653

Using Javascript you can use HTMLSelectElement.selectedIndex, HTMLOptionElement.defaultSelected and HTMLOptionElement.index. Loop the options and when you find the one which is default then set its index to the 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);

On jsfiddle

Except for the EventTarget.addEventListener (which can be shimmed) that I used for the button "click" listener, this is about as cross browser as it gets.

score 0 · Answer 8 · answered Aug 08 '18 at 04:47

Here is the simplest form in JavaScript only, as requested. I know this is years late, but this might help someone at some point. I had trouble with this as well, so I figure'd i'd post.

// Set default value
var defaultValue = 0;

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

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

Natively set HTML select element to its default value

8 Answers8

Usage:

Linked