CODEWITHSUNDEEP
javascripthtml
jhchen
jhchen

Reputation: 14747

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 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?

Upvotes: 1

Views: 8175

Answers (8)

user5803705
user5803705

Reputation:

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;

Upvotes: 0

Xotic750
Xotic750

Reputation: 23472

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.

Upvotes: 0

acdcjunior
acdcjunior

Reputation: 135742

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.

Upvotes: 5

Serg Hospodarets
Serg Hospodarets

Reputation: 4678

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

Upvotes: 0

Scott Shipp
Scott Shipp

Reputation: 2301

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!

Upvotes: 0

Thumbz
Thumbz

Reputation: 347

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.

Upvotes: 0

lonesomeday
lonesomeday

Reputation: 237817

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

Upvotes: 5

Thomas Junk
Thomas Junk

Reputation: 5676

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/

Upvotes: 0

Related Questions