Get selected values of multiple select box

Benchmark created by Arlen Beiler on March 7, 2016

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>
</select>
<script>
// 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 Array.prototype.map.call(select.selectedOptions, 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;
}
</script>

Setup

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

Teardown

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

Test runner

selected = getSelectValues1(select);

selected = getSelectValues2(select);

selected = getSelectValues3(select);

Revisions

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 March 7, 2016