HTML: Selection, Popup Menu

By Xah Lee. Date: . Last updated: .

Single Value Selection (Popup Menu)

Result:

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

<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 πŸ—Ή]

βˆ‘ JS in Depth
XAH
Buy Xah JavaScript Tutorial
βˆ‘ JS in Depth
XAH

JS Obj Ref

DOM


DOM

Overview

Basic Examples

HTML Input

Web Scripting Examples

Web Scripting Misc

jQuery

node.js