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>

Back to top