JS DOM: Selection, Popup Menu ▤

Html tags: select, option

select

A drop-down selection.

<div>
 <select id="pets_zmw" name="pets_zmw" size="1">
  <option value="dog">dog</option>
  <option value="cat" selected>cat</option>
  <option value="bird">bird</option>
 </select>
</div>

option

• Menu item.
• Used with select.

optgroup

for adding a label to a group of option.

datalist

2026-08-21, not well supported

for grouping option tags.

Example. single value selection (popup menu)

Result:

<div>
 <select id="pets_zmw" name="pets_zmw" size="1">
  <option value="dog">dog</option>
  <option value="cat" selected>cat</option>
  <option value="bird">bird</option>
 </select>
</div>

<p>Result:
<span id="output_wfzs"></span>
</p>

Size attribute must 1, otherwise it's a selection-list and returns a list.

{
    const pets_zmw = document.getElementById("pets_zmw");
    const output_wfzs = document.getElementById("output_wfzs");
    const f_update = () => {
        output_wfzs.textContent = pets_zmw.value;
    };
    pets_zmw.addEventListener("input", f_update);
    f_update();
}

Example. Multiple values selection

select tag can have attribute multiple, which allow user to make more than one selection.

Hold down Ctrl to select more than one item. (on the Mac, hold down ⌘ command.)

Result:

<select id="anim_fktn" name="anim_fktn" size="6" multiple>
 <option value="dog">dog</option>
 <option value="cat">cat</option>
 <option value="bird">bird</option>
 <option value="pig">pig</option>
 <option value="rabbit">rabbit</option>
 <option value="snake">snake</option>
</select>

<p>Result:
<span id="output_n8bn"></span>
</p>

{
    const anim_fktn = document.getElementById("anim_fktn");
    const output_n8bn = document.getElementById("output_n8bn");
    const f_update2 = () => {
        const selectedValues = Array.from(anim_fktn.options).filter((x) => x.selected).map((x) => x.value);
        output_n8bn.textContent = selectedValues.toString();
    };
    anim_fktn.addEventListener("input", f_update2);
    f_update2();
}

Best to use checkboxes instead of multiple selection.

• JS DOM: Checkbox ☑