HTML element: select

Simple example

The following example tries to demonstrate how JavaScript can be used to catch the selection. Of particular interest are the values of this.value and this[this.selectionIndex].innerHTML in the tag's event handler.

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <title>TODO</title>

  <script type="text/javascript">

    function item_chosen(ev) {
       document.getElementById('value'                   ).innerHTML = this.value;
       document.getElementById('selectedIndex'           ).innerHTML = this.selectedIndex;
       document.getElementById('this_selectedIndex'      ).innerHTML = this[this.selectedIndex];
       document.getElementById('this_selectedIndex_inner').innerHTML = this[this.selectedIndex].innerHTML;
    }

    function main() {
       var selection = document.getElementById('selection');
       selection.addEventListener('change', item_chosen, false);
    }

  </script>

</head>
<body onload='main()'>

   Choose wisely:
   <select id='selection'>
      <option value='val_0'>Zero </option>
      <option value='val_1'>One  </option>
      <option value='val_2'>Two  </option>
      <option value='val_3'>Three</option>
      <option value='val_4'>Four </option>
      <option value='val_5'>Fvie </option>
   </select>

  </p>
  Some values that are found via <code>this</code> in the event handler:
   <table>
     <tr><td><code>this.value                        </code></td><td id='value'                   ></td></tr>
     <tr><td><code>this.selectedIndex                </code></td><td id='selectedIndex'           ></td></tr>
     <tr><td><code>this[this.selectedIndex]          </code></td><td id='this_selectedIndex'      ></td></tr>
     <tr><td><code>this[this.selectedIndex].innerHTML</code></td><td id='this_selectedIndex_inner'></td></tr>
   </table>

</body>
</html>

Github repository about-html, path: /tags/select/basic.html

Choosing multiple values

In order to allow the user to choose multiple values, the multiple attribute needs to be set in the <select> tag:

<select id='selection' multiple>

Setting an initially chosen value

In order to initially present the user with an already chosen value (that is different from the first item), the selected attribute needs to be specified in the respective <option> tag:

<select …>
   <option value='v1'          > foo </option>
   <option value='v2'          > bar </option>
   <option value='v3' selected > baz </option>
   <option value='v4'          > qux </option>
</select>

HTML element: select

Simple example

Choosing multiple values

Setting an initially chosen value

See also