CODEWITHSUNDEEP
javascript
chris
chris

Reputation: 2951

Swap default selected select options with pure Javascript

I have a select box as follows

<select>
<option value="yes">Yes</option>
<option value="No" selected="selected">No</option>
<option value="Maybe">Maybe</option>
<option value="So">So</option>
</select>

I would like

<select>
<option value="yes">Yes</option>
<option value="No">No</option>
<option value="Maybe" selected="selected">Maybe</option>
<option value="So">So</option>
</select>

*note default selection is now "Maybe" instead of "No"

I learned jquery before really getting comfortable with pure JavaScript. So im trying to learn it.

Upvotes: 0

Views: 4860

Answers (2)

Jacob Relkin
Jacob Relkin

Reputation: 163288

You should assign an id to the select element then do this:

var s = document.getElementById( 'select_box' );
s.options[ 2 ].selected = true;

Upvotes: 1

Kenan Banks
Kenan Banks

Reputation: 212058

I would assign an id to the select element:

<select id="choices">
    <option value="yes">Yes</option>
    <option value="No" selected="selected">No</option>
    <option value="Maybe">Maybe</option>
    <option value="So">So</option>
</select>

Then, access the options via the standard options array on <select> elements:

var choices = document.getElementById('choices');
choices.options[2].selected = true;

Upvotes: 3

Related Questions