HTML/JavaScript - Reference all selected options in a multiple list

select, options, selected, value, multiple, Array

Try It

There are two independent examples demonstrated here. First select some values in the list.


selected array

Overview

In this page you'll find:

The purpose of the Loop Selected example is to get the values of the options that have been selected by the user.

If you want an example of programmatically selecting all the options automatically when a form is submitted, check out our tutorial007.html.

Browser Support

Tested on a Windows 2000 machine, the example on this page works in Firefox 1.0, Opera 7.54, Netscape 6.1, Netscape 7.1, and Internet Explorer 6.0.

Source

Public Domain

The HTML and JavaScript listed below are released to the public domain. Read the Terms of Use for details. The contents of this page are still copyrighted.

The JavaScript

<script language="JavaScript" type="text/javascript">
<!--
function loopSelected()
{
  var txtSelectedValuesObj = document.getElementById('txtSelectedValues');
  var selectedArray = new Array();
  var selObj = document.getElementById('selSeaShells');
  var i;
  var count = 0;
  for (i=0; i<selObj.options.length; i++) {
    if (selObj.options[i].selected) {
      selectedArray[count] = selObj.options[i].value;
      count++;
    }
  }
  txtSelectedValuesObj.value = selectedArray;
}
function openInNewWindow(frm)
{
  // open a blank window
  var aWindow = window.open('', 'Tutorial004NewWindow',
   'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
  
  // set the target to the blank window
  frm.target = 'Tutorial004NewWindow';
  
  // submit
  frm.submit();
}
//-->
</script>

The HTML

<form action="tutorial004_nw.html" method="get">
  <table border="1" cellpadding="10" cellspacing="0">
  <tr>
    <td valign="top">
      <input type="button" value="Submit" onclick="openInNewWindow(this.form);" />
      <input type="button" value="Loop Selected" onclick="loopSelected();" />
      <br />
      <select name="selSea" id="selSeaShells" size="5" multiple="multiple">
        <option value="val0" selected>sea zero</option>
        <option value="val1">sea one</option>
        <option value="val2">sea two</option>
        <option value="val3">sea three</option>
        <option value="val4">sea four</option>
      </select>
    </td>
    <td valign="top">
      <input type="text" id="txtSelectedValues" />
      selected array
    </td>
  </tr>
  </table>
</form>

Explanation

Submit - Submitting selected values

When submitting a form, all the selected values are sent. Just make sure to give the select tag a name, e.g. name="selSea"

In the Try It source, you may notice there's also an id. The id is used to reference the object in the DOM. You may also notice that I don't submit to a server side page. I submit to tutorial004_nw.html, which is just an HTML page that displays the name/value pairs using JavaScript. Feel free to view the source of that page.

The Try It example does a roundabout way of submitting the form, because it's opening a new window, but a normal submit button will send the values fine without any special coding. For example, the following is a basic example of a form submit.

<form action="yourServerSidePage.asp" method="post">
  <select name="selSea" size="2" multiple="multiple">
    <option value="val0">sea zero</option>
    <option value="val1">sea one</option>
  </select>
  <input type="submit" value="Submit" />
</form>

Loop Selected - Putting the values into an array

When using selectedIndex on a multiple select list, it only gives the position of the first selected option. This tutorial shows how to loop a select list, and put the selected values into an array. The point of putting the values into an array is if you want to use the values client-side.

When working with an array, it can be initialized to nothing, and elements can be added dynamically (that is, the length will increment). Refer to the Try It source.

Knowing which options are selected could be useful for other purposes. An advanced example is tutorial_mixed2b.html, which adds/removes select options.


Supplemental Information

(external links - open in new window)

selected property (W3C - DOM Level 1)
Array Object (w3schools.com)

About this page: