HTML: Selection, Popup Menu

By Xah Lee. Date: . Last updated: .

Single Value Selection (Popup Menu)

Result:

Code

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

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

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

{
  const selectPets87516 = document.getElementById("selectPets87516");
  const showBox57625 = document.getElementById("showBox57625");

  const f_update = () => {
    showBox57625.textContent = selectPets87516.value;
  };

  selectPets87516.addEventListener("input", f_update, false);

  f_update();
}

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:

Code

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

<p>Result:
<span id="showBox91970"></span>
</p>
{
const selectAni08005 = document.getElementById ('selectAni08005');
const showBox91970 = document.getElementById ('showBox91970');

const f_update2 = (() => {
 const selectedValues = Array.from ( selectAni08005.options ) .filter( (x => x.selected) ) . map( (x => x.value));
 showBox91970 . textContent = selectedValues .toString();
});

selectAni08005 .addEventListener ('input', f_update2, false);

f_update2();
}

Best to use checkboxes instead of multiple selection.

〔see HTML: Checkbox ☑〕

HTML Input tutorial