HTML: Selection, Popup Menu
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 β]