Get selected values of multiple select box

Benchmark created by Arlen Beiler on

Preparation HTML

<select multiple="multiple">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected="selected">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8" selected="selected">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
// Return an array of the selected opion values
// select is an HTML select element
function getSelectValues1(select) {
  var result = [];
  var options = select && select.options;
  var opt;

  for (var i=0, iLen=options.length; i<iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.value || opt.text);
  return result;
function getSelectValues2(select) {
  return, function(a) {return a.value;});
function getSelectValues3(select) {
  var result = [];
  var options = select && select.selectedOptions;

  for (var i=0, iLen=options.length; i<iLen; i++) {
    result.push(options[i].value || options[i].text);
  return result;


var select = document.querySelector('select'),
    i, len, selected;


            delete select;
  delete i;
  delete len;
  delete selected;

Test runner

Ready to run.

Testing in
For Loop on Options
selected = getSelectValues1(select);
Map of SelectedOptions
selected = getSelectValues2(select);
For Loop of SelectedOptions
selected = getSelectValues3(select);


You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Arlen Beiler on