Natively Set HTML Select Element To Its Default Value

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

Solution 1:

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

Solution 2:

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

Solution 3:

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/

Solution 4:

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.

Solution 5:

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!