Property Choice: selectedIndex or selected
There are two properties available for getting and setting the selected option(s) in a select list: the selectedIndex
property of a select object, and the selected
property of an option object. They are both read/write properties.
We use the following form to demonstrate. It includes a select-one
type select list on the left and a select-multiple
type on the right.[1] Some options are set selected
in the markup for the demonstration:
Setting selectedIndex and selected Properties
Setting selectedIndex
selects the option at the specified index, deselecting any other selected option. This is true for both select-one
and select-multiple
type select lists. The following will select the third option in each of the select boxes in the example form. Click the "Set selectedIndex" button in the form above to see the result.
// select third option, deselecting others
sel.selectedIndex = 2;
sel_multi.selectedIndex = 2;
Setting the selected
property true on an option in a select-one
type select box will deselect any other selected option, setting its selected
property to false. In a select-multiple
type select box, you can add a selection using JavaScript without deselecting other options by setting an option's selected
property to true.
Here we select the second option in each of the select boxes. Click the "Set selected" button in the form above to see.
// set selected property, selecting second option in each list
sel.options[1].selected = true;
sel_multi.options[1].selected = true;
Notice the result if you have already selected items. In the select box on the left, your selection will be deselected; in the select box on the right, the second item in the list will be added to any previous selections.
Reading selectedIndex and selected Properties
In read mode the selectedIndex
property returns the index number of the selected option or the first selected option in a select list. Here we obtain the selectedIndex
for our two select lists above:
// references to the two select lists
// used throughout the examples below
var sel = document.getElementById('scripts');
var sel_multi = document.getElementById('scripts_multi');
// display selectedIndex property
// select list on the left
console.log( sel.selectedIndex ); // 1
// select list on the right
console.log( sel_multi.selectedIndex ); // 1
Once you have obtained the index value (selectedIndex
) of the selected option you can access its other properties, such as value
or text
:
// use selectedIndex to access other properties of selected option
console.log( sel.options[sel.selectedIndex].value ); // tooltip
console.log( sel_multi.options[sel_multi.selectedIndex].text ); // JavaScript Tooltips
The selected
property returns true or false to indicate whether the specified option is selected or not. Here we inspect the selected
property of the second option in each of the select lists above. They both return true since they are selected in the markup for the form:
// display value of selected property of second option in each select list
console.log( sel.options[1].selected ); // true
console.log( sel_multi.options[1].selected ); // true
Looping Through Options to Get or Set selected Property
Although you can address a particular option element as we have shown above, the selected
property is typically accessed in a for
loop that inspects each option in a select list. Here we show a for
loop that checks each option's value and sets selected
true if it matches the value passed to the function:
function selectOption(sel, val) {
var opt;
// loop through options in select list
for ( var i = 0, len = sel.options.length; i < len; i++ ) {
opt = sel.options[i]; // reference to current option
if ( opt.value === val ) {
opt.selected = true;
break;
}
}
}
// select option in sel (reference obtained above) if its value is 'scroll'
selectOption(sel, 'scroll');
Two other examples demonstrate using a for
loop to iterate over options in a select list: one returns the selected option in a select-one
type select list; the other returns an array containing the list of selected options in a select-multiple
type select list.
Example Form Markup
Markup for the example form above is displayed here:
<form action="#" method="post" id="demoForm" class="demoForm">
<select id="scripts" name="scripts">
<option value="scroll">Scrolling Divs JavaScript</option>
<option value="tooltip" selected>JavaScript Tooltips</option>
<option value="con_scroll">Continuous Scroller</option>
<option value="banner">Rotating Banner JavaScript</option>
<option value="random_img">Random Image PHP</option>
<option value="form_builder">PHP Form Generator</option>
<option value="table_class">PHP Table Class</option>
<option value="order_forms">PHP Order Forms</option>
</select>
<select multiple="multiple" size="4" id="scripts_multi" name="scripts_multi[]" >
<option value="scroll">Scrolling Divs JavaScript</option>
<option value="tooltip" selected>JavaScript Tooltips</option>
<option value="con_scroll">Continuous Scroller</option>
<option value="banner" selected>Rotating Banner JavaScript</option>
<option value="random_img">Random Image PHP</option>
<option value="form_builder">PHP Form Generator</option>
<option value="table_class">PHP Table Class</option>
<option value="order_forms">PHP Order Forms</option>
</select>
<input type="button" value="Set selectedIndex" id="set_selIdx" />
<input type="button" value="Set selected" id="set_sel" />
</form>
- A
select-one
type select list allows selection of only one option at a time. Aselect-multiple
type select list includes amultiple
attribute and allows selection of multiple options using ctl-click. ^