JS DOM: Selection, Popup Menu ▤

Html tags: select, option

select

A drop-down selection.

example

dog cat bird

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

option

• Menu item.
• Used with select.

optgroup

for adding a label to a group of option.

example

Apple Banana Carrot

<select>
 <optgroup label="Fruits">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
 </optgroup>
 <optgroup label="Vegetables">
  <option value="carrot">Carrot</option>
 </optgroup>
</select>

datalist

🛑 warning: 2026-08-21, not well supported

for grouping option tags.

Example. single value selection (popup menu)

Result:

<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>

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

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

"use strict";
{
    const pets_zmw = document.getElementById("pets_zmw");
    if (pets_zmw === null)
        throw (new Error(`id pets_zmw is missing.`));
    const output_wfzs = document.getElementById("output_wfzs");
    if (output_wfzs === null)
        throw (new Error(`id output_wfzs is missing.`));
    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.)

<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>

"use strict";
{
    const anim_fktn = document.getElementById("anim_fktn");
    if (anim_fktn === null)
        throw (new Error(`id anim_fktn is missing.`));
    const output_n8bn = document.getElementById("output_n8bn");
    if (output_n8bn === null)
        throw (new Error(`id output_n8bn is missing.`));
    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();
}

🟢 tip: better is checkboxes instead of multiple selection.

• JS DOM: input checkbox ☑