JavaScript select Element (ok)
https://www.javascripttutorial.net/javascript-dom/javascript-select-box/
Part 1.
Part 2:
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:
AngularReactVue.jsEmber.js
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:
AngularReactVue.jsEmber.js
The HTMLSelectElement
type
HTMLSelectElement
typeTo 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
selectedIndex
propertyTo 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:
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
value
propertyThe 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:
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
HTMLOptionElement
typeIn 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:
For example, to access the text
and value
of the second option, you use the following:
To get the selected option of a <select>
element with a single selection, you use the following code:
Then you can access the text
and value
of the selected option via text
and value
properties:
When a <select>
element allows multiple selections, you can use the selected
property to determine which options are selected:
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:
And to get the text
property of the options, you chain the result of the filter()
method with the map()
method, like this:
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.
Was this tutorial helpful ?
Last updated