JavaScript select Element
Summary: in this tutorial, you will learn how to handle the <select>
element in JavaScript.
Introduction to the HTML select elements
A <select>
element provides you with a list of options. A <select>
element allows you to select one or multiple options.
To create a <select>
element, you use the <select>
and <option>
elements. For example:
<select id="framework">
<option value="1">Angular</option>
<option value="2">React</option>
<option value="3">Vue.js</option>
<option value="4">Ember.js</option>
</select>
Code language: HTML, XML (xml)
The above <select>
element allows you to select a single option at a time.
To enable multiple selections, you add multiple
attribute to <select>
element as follows:
<select id="framework" multiple>
<option value="1">Angular</option>
<option value="2">React</option>
<option value="3">Vue.js</option>
<option value="4">Ember.js</option>
</select>
Code language: HTML, XML (xml)
The HTMLSelectElement
type
To interact with <select>
element in JavaScript, you use the HTMLSelectElement
type.
The HTMLSelectElement
type has the following useful properties:
selectedIndex
– returns the zero-based index of the selected option. TheselectedIndex
is-1
if no option is selected. If the<select>
element allows multiple selections, theselectedIndex
returns thevalue
of the first option.value
– returns thevalue
property of the first selected option element if there is one. Otherwise, it returns an empty string.multiple
– returnstrue
if the<select>
element allows multiple selections. It is equivalent to themultiple
attribute.
The selectedIndex
property
To select a <select>
element, you use the DOM API like getElementById()
or querySelector()
.
The following example illustrates how to get the index of the selected option:
<html>
<head>
<title>JavaScript Select Element Demo</title>
<link href="css/selectbox.css" rel="stylesheet">
</head>
<body>
<form>
<label for="framework">Select a JS Framework</label>
<select id="framework">
<option value="1">Angular</option>
<option value="2">React</option>
<option value="3">Vue.js</option>
<option value="4">Ember.js</option>
</select>
<button id="btn">Get the Selected Index</button>
</form>
<script>
const btn = document.querySelector('#btn');
const sb = document.querySelector('#framework')
btn.onclick = (event) => {
event.preventDefault();
// show the selected index
alert(sb.selectedIndex);
};
</script>
</body>
</html>
Code language: HTML, XML (xml)
How it works:
- First, select the
<button>
and<select>
elements using thequerySelector()
method. - Then, attach a click event listener to the button and show the selected index using the
alert()
method when the button is clicked.
The value
property
The value
property of the <select>
element depends on the <option>
element and its HTML multiple
attribute:
- If no option is selected, the
value
property of the select box is an empty string. - If an option is selected and has a
value
attribute, thevalue
property of the select box is the value of the selected option. - If an option is selected and has no
value
attribute, thevalue
property of the select box is the text of the selected option. - If multiple options are selected, the
value
property of the select box is derived from the first selected option based on the previous two rules.
See the following example:
<html>
<head>
<title>JavaScript Selected Value</title>
<link href="css/selectbox.css" rel="stylesheet">
</head>
<body>
<div id="container">
<form>
<label for="framework">Select a JS Framework:</label>
<select id="framework">
<option value="">Angular</option>
<option value="1">React</option>
<option value="2">Vue.js</option>
<option>Ember.js</option>
</select>
<button id="btn">Get the Selected Value</button>
</form>
</div>
<script>
const btn = document.querySelector('#btn');
const sb = document.querySelector('#framework')
btn.onclick = (event) => {
event.preventDefault();
alert(sb.value);
};
</script>
</body>
</html>
Code language: HTML, XML (xml)
In this example:
- If you select the first option, the
value
property of the<select>
is empty. - If you select the last option, the
value
property of the select box isEmber.js
because the selected option has novalue
attribute. - If you select the second or third option, the value property will be
"1"
or"2"
.
The HTMLOptionElement
type
In JavaScript, the HTMLOptionElement
type represents the <option>
element.
The HTMLOptionElement
type has the following handy properties:
index
– the index of the option inside the collection of options.selected
– returnstrue
when the option is selected. You set this property totrue
to select an option.text
– returns the option’s text.value
– returns the HTML value attribute.
The <select>
element has the options
property that allows you to access the collection options:
selectBox.options
Code language: CSS (css)
For example, to access the text
and value
of the second option, you use the following:
const text = selectBox.options[1].text;
const value = selectBox.options[1].value;
Code language: JavaScript (javascript)
To get the selected option of a <select>
element with a single selection, you use the following code:
let selectedOption = selectBox.options[selectBox.selectedIndex];
Code language: JavaScript (javascript)
Then you can access the text
and value
of the selected option via text
and value
properties:
const selectedText = selectedOption.text;
const selectedValue = selectedOption.value;
Code language: JavaScript (javascript)
When a <select>
element allows multiple selections, you can use the selected
property to determine which options are selected:
<html>
<head>
<title>JavaScript Select Box</title>
<link rel="stylesheet" href="css/selectbox.css">
</head>
<body>
<div id="container">
<form>
<label for="framework">Select one or more JS Frameworks:</label>
<select id="framework" multiple>
<option value="1">Angular</option>
<option value="2">React</option>
<option value="3">Vue.js</option>
<option value="4">Ember.js</option>
</select>
<button id="btn">Get Selected Frameworks</button>
</form>
</div>
<script>
const btn = document.querySelector('#btn');
const sb = document.querySelector('#framework');
btn.onclick = (e) => {e.preventDefault();
const selectedValues = [].filter
.call(sb.options, option => option.selected)
.map(option => option.text);
alert(selectedValues);
};
</script>
</body>
</html>
Code language: HTML, XML (xml)
In this example, the sb.options
is an array-like object, so it doesn’t have the filter()
methods like an Array
object.
To borrow these methods from the Array
object, you use the call()
method. For example, the following returns an array of selected options:
[].filter.call(sb.options, option => option.selected)
Code language: PHP (php)
And to get the text
property of the options, you chain the result of the filter()
method with the map()
method, like this:
.map(option => option.text);
Code language: JavaScript (javascript)
Summary
- The
<select>
element allows you to select one or multiple options. Add themultiple
attribute to the<select>
element to enable multiple selections. - The
HTMLSelectElement
represents the<select>
element. Use theselectedIndex
andvalue
to get the index and value of the selected option. - The
HTMLOptionElement
represents the<option>
element. If the option is selected, theselected
property is true. TheselectedText
andselectedValue
properties return thetext
andvalue
of the selected option.