Getting Options

Getting Options

A <select> exposes a live options collection (select[1] works too), namedItem(id), add(option, before), remove(index), selectedIndex, value and selectedOptions. new Option(text, value) creates an option.

Reading, adding and selecting optionsHTMLLive

<body style="display: flex; gap: 16px; margin: 8px">
<select id="size" multiple size="4">
  <option id="s" value="1">Small</option><option value="2" selected>Medium</option>
  <option value="3" selected>Large</option>
</select>
<pre id="log" style="margin: 0"></pre>
<script type="module">
  const select = document.querySelector('#size');
  select.add(new Option('Extra large', '4'));        // no second argument: append
  select.options[0].selected = true;
  document.querySelector('#log').textContent = [
    `namedItem("s"): ${select.namedItem('s').text}, select[1].value: ${select[1].value}`,
    `selectedIndex: ${select.selectedIndex}, value: ${select.value}, length: ${select.length}`,
    `selected: ${[...select.selectedOptions].map((o) => o.text).join(', ')}`,
  ].join('\n');
</script>

Browser output of Listing 8.33 — Browser output of 33

With multiple, value returns only the first selected option, so read selectedOptions. Listen for change, which also fires for keyboard selection.

MENU