Get Value or Selected Option in Select Box

There are a variety of ways to use JavaScript to obtain the value of the selected option in a select list or a reference to the selected option:

  • Use the value property of the select list.
  • Use the selectedIndex property.
  • Loop through the options and determine which one is selected and return either its value or a reference.

We will discuss all of these here, starting with the value property. The following form is used to demonstrate:

Demo: Get Value or Text of Selected Option

Make a selection from the list and click the buttons to see the result. The markup and JavaScript for the example are displayed below.

The value Property

The value property of a select box comes from the value attribute of the selected option or the first selected option in a select-multiple type select box. So the value of the selected option can be obtained in JavaScript as follows:

// reference to 'scripts' select list 
// used throughout the examples below
var sel = document.getElementById('scripts');

// display value property of select list (from selected option)
console.log( sel.value );

If option elements do not contain a value attribute, generally the text content of the option element will be the value property. However, Internet Explorer prior to version 9 will not provide the value in this case. If your option elements do not include value attributes and you wish to support older browsers, for best results use the selectedIndex and text properties.

The selectedIndex Property

The selectedIndex property provides the index number of the selected option in a select list.[1] You can use it to reference the selected option as follows:

// reference to selected option
var opt = sel.options[sel.selectedIndex];

Then you can access the option's value, text, or other properties:

// display value and text property values
console.log( opt.value );
console.log( opt.text );

The options property of the select list is a node list of all the option elements contained within it. The selectedIndex property of the select list specifies the location of the selected option in the node list. The text property of an option is the content of the option element.

Using a for Loop to Obtain Selected Option

You can use a for loop to iterate through the options of a select list to determine which is selected. A function can be defined to return a reference to the selected option or its value. The following returns a reference to the selected option:

function getSelectedOption(sel) {
    var opt;
    for ( var i = 0, len = sel.options.length; i < len; i++ ) {
        opt = sel.options[i];
        if ( opt.selected === true ) {
            break;
        }
    }
    return opt;
}

// get selected option in sel (reference obtained above)
var opt = getSelectedOption(sel);

// display its value and text
console.log( opt.value );
console.log( opt.text );

This function returns a single selected option, which is suitable for a select-one type select list. A similar function suited for select-multiple type select lists can return multiple selected options.

Example Form Markup

Markup for the example form above is displayed here:

<form action="#" method="post" id="demoForm" class="demoForm">

    <fieldset>
        <legend>Demo: Get Value or Text of Selected Option</legend>
        
        <p>
            <select id="scripts" name="scripts">
                <option value="scroll">Scrolling Divs JavaScript</option>
                <option value="tooltip">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>
            
            <input type="text" size="30" name="display" id="display" />
        </p>

        <p>
            <input type="button" id="showVal" value="Value Property" />
            <input type="button" id="showTxt" value="selectedIndex/Text" />
            <input type="button" id="doLoop" value="Value from Loop" />
        </p>

    </fieldset>
</form>

JavaScript for Example Form

JavaScript for the example is displayed here:

(function() {
    
    // get references to select list and display text box
    var sel = document.getElementById('scripts');
    var el = document.getElementById('display');


    function getSelectedOption(sel) {
        var opt;
        for ( var i = 0, len = sel.options.length; i < len; i++ ) {
            opt = sel.options[i];
            if ( opt.selected === true ) {
                break;
            }
        }
        return opt;
    }

    // assign onclick handlers to the buttons
    document.getElementById('showVal').onclick = function () {
        el.value = sel.value;    
    }
    
    document.getElementById('showTxt').onclick = function () {
        // access text property of selected option
        el.value = sel.options[sel.selectedIndex].text;
    }

    document.getElementById('doLoop').onclick = function () {
        var opt = getSelectedOption(sel);
        el.value = opt.value;
    }
    
}());
// immediate function to preserve global namespace

Back to top


  1. Find out more about a select list's selectedIndex property as compared to the selected property of an option object. ^