Intentionally set the default HTML element

Question

I have a select element and the user changes the selection. Later, I want to programmatically change the select element to the default value. What is the best way to do this? I am looking for a way to do this initially, without jQuery.

For example, if you select:

<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 to the default value of One, how would I do this?

Answer 1

This is not difficult to do if you understand that properties are different from attributes. Attributes (as a rule) do not change, but properties do. The selected attribute will always remain the same as in the original HTML, and the selected property will depend on what happened to the element in the page resource.

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

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

jsFiddle demonstrating this.

Please note that this requires a browser that supports querySelector . These are most of them these days, but some older browsers will not. If this is a problem, you will need to find the element using hasAttribute('selected') .

Answer 2

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

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

HTMLOptionElement Interface

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

Thus, this means that the option is selected by default or not.

Using:

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

Violin example here

_{Note. So no one says that I did not say this: it can be installed programmatically, but that would be very stupid.}

Answer 3

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

 document.forms[0].reset(); 

Cf. MDN

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

Answer 4

If you want to be lazy and this will 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 only one part, and I do not recommend it, the next best thing you can do is basically rewrite some jQuery functions from scratch.

I don’t know exactly how the Jquery.click () function is written, but I suppose it uses to get the element by id and set the internal html to do this.

You can get the select element by id and reset it html to its original html state.

Answer 5

Using direct Javascript, assuming that the default value of the dropdown is the first 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 identifier "select" so that it sets the 0th indexed option.

JSFiddle Demo

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

Answer 6

You can save defaultSelectedIndex and reset manually.
And don't forget to fire the "onchange" event when you select in this case.
Pure JS Example

Answer 7

With Javascript, you can use HTMLSelectElement.selectedIndex , HTMLOptionElement.defaultSelected and HTMLOptionElement.index . Loop options , and when you find the one by default, set its index to 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 on

With the exception of the EventTarget.addEventListener (which can be adjusted), which I used for the click button on the listener, this is about the cross of the browser as it goes.