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?

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?

• javascript
• html

• 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 Commented Jul 5, 2013 at 22:39
• You can apply the solutions provided here easily without jQuery. – Felix Kling Commented Jul 8, 2013 at 12:46

8 Answers 8

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

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.}

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/jX4m5/2/

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 remend 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.

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!

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

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.

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;