Get List of Multiple Selected Options in Select Box

On this page we show how to use JavaScript to get a list of selected options in a select-multiple type select box. We use the following form to demonstrate (Ctl-click to select multiple options):

Demo: Get Selected Options

JavaScript to Handle Multiple Selected Options

To get a list of the selected options, first we need a reference to the select list. Then we loop through its options collection and inspect the selected property of each option in turn. We have enclosed this JavaScript in a getSelectedOptions function which returns an array of selected options:

// arguments: reference to select list, callback function (optional)
function getSelectedOptions(sel, fn) {
    var opts = [], opt;
    
    // loop through options in select list
    for (var i=0, len=sel.options.length; i<len; i++) {
        opt = sel.options[i];
        
        // check if selected
        if ( opt.selected ) {
            // add to array of option elements to return from this function
            opts.push(opt);
            
            // invoke optional callback function if provided
            if (fn) {
                fn(opt);
            }
        }
    }
    
    // return array containing references to selected option elements
    return opts;
}

Our getSelectedOptions function includes a callback mechanism that enables handling each selected option as it is collected, so there is no need to loop through the set a second time. The callback function for this example is displayed here:

// example callback function (selected options passed one by one)
function callback(opt) {
    // display in textarea for this example
    var display = document.getElementById('display');
    display.innerHTML += opt.value + ', ';

    // can access properties of opt, such as...
    //alert( opt.value )
    //alert( opt.text )
    //alert( opt.form )
}

Onchange and Onsubmit Handling

The example form above demonstrates obtaining the list of selected options both onchange and onsubmit. Onsubmit, we check the length of the list to report how many option elements have been selected. Onchange, we list the values of selected options in the textarea.

The JavaScript below shows how onchange and onsubmit handling are set up for this example:

// anonymous function onchange for select list with id demoSel
document.getElementById('demoSel').onchange = function(e) {
    // get reference to display textarea
    var display = document.getElementById('display');
    display.innerHTML = ''; // reset
    
    // callback fn handles selected options
    getSelectedOptions(this, callback);
    
    // remove ', ' at end of string
    var str = display.innerHTML.slice(0, -2);
    display.innerHTML = str;
};

document.getElementById('demoForm').onsubmit = function(e) {
    // reference to select list using this keyword and form elements collection
    // no callback function used this time
    var opts = getSelectedOptions( this.elements['demoSel[]'] );
    
    alert( 'The number of options selected is: ' + opts.length ); //  number of selected options
    
    return false; // don't return online form
};

Form Markup

Markup for the example form above is displayed here:

<form action="#" method="post" id="demoForm" class="demoForm">
    <fieldset>
        <legend>Demo: Get Selected Options</legend>
    
        <p>
            <select name="demoSel[]" id="demoSel" size="4" multiple>
                <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="submit" value="Submit" />
            <textarea name="display" id="display" placeholder="view select list value(s) onchange" cols="20" rows="4" readonly></textarea>
        </p>
        
    </fieldset>
</form>

Name Attribute for Multiple Select

Notice the name demoSel[] is applied to the example select box. Attach square brackets to the end of the name of a select-multiple type select box in order for server side code to treat selected options as an array. Otherwise only the last selected item will be provided. An ID can be used to obtain a reference to the select box in JavaScript as shown above.[1]

Back to top


  1. Find out more about Obtaining References to Forms and Form Elements. See also Forms and Event Handling for information on access to forms and form elements in event handler functions assigned using various approaches. ^