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 ๐Ÿ—น]

DOM How-To


Web Scripting Overview


HTML Input


Web Scripting Examples


Web Scripting Misc


jQuery


node.js

Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials