In this tutorial, we will explore how to handle the < select > option in JavaScript.
HTML Select Option
A <select> option facilitate us the options list. It permits us to choose a single or more than one option. We use the <option> and <select> elements for forming a <select> option.
For example:
<select id="color">
<option value="1">Red</option>
<option value="2">Yellow</option>
<option value="3">Green</option>
<option value="4">Blue</option>
</select>
The <select> feature allows us to select a single option from those listed previously.
To enable multiple selections, we can add the <select> attribute to the < multiple > elements listed below:
<select id="color" multiple>
<option value="1">Red</option>
<option value="2">Yellow</option>
<option value="3">Green</option>
<option value="4">Blue</option>
</select>
HTMLSelectElement type
In JavaScript, the HTMLSelectElement type is utilized for engaging with <select>option elements.
The HTMLSelectElement type includes several useful attributes, which are:
- selectedIndex- This attribute gives a zero-based selected options index. The selectedIndex will be -1 when no option is chosen. When the <select> option permits more than once selections, the selectedIndex gives the first option's value.
- value- The value attribute gives the value attribute of the initially selected option component if there is a single, otherwise, it will return the empty strings.
- multiple- The multiple attributes give true when the <select> component permits more than one selection. It is the same as the multiple attributes.
selectedIndex property
We utilize the DOM API through methods such as querySelector and getElementById.
The following example demonstrates the process of retrieving the index of the chosen option as outlined below:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Select Option Demo</title>
<link href="css/selectbox.css" rel="style sheet">
</head>
<body>
<form>
<label for="color">Select a Color</label>
<select id="color">
<option value="1">Red</option>
<option value="2">Yellow</option>
<option value="3">Green</option>
<option value="4">Blue</option>
</select>
<button id="btn">Get a Selected Index</button>
</from>
<script>
const btn = document.querySelector('#btn');
const sb = document.querySelector('#color');
btn.onclick = (event) =>
{
event.preventDefault();
alert(sb.selectedIndex);
};
</script>
</body>
</html>
How it works:
- Initially, select the <select> and <button> components with the help of querySelector method.
- After that, link the click event listener to this button and display the selected index with the help of alert method if the button is pressed.
value property
The <select> element's value property relies on the <option> component and multiple attribute of its HTML :
- The value property of a select box will be an empty string when no option has been selected.
- The value property of a select box will be the value of the chosen option when an option has been chosen and contains the value attribute.
- The value property of a select box will be the text of the chosen option when an option has been chosen and contains no value attribute.
- The value property of a select box will be derived from the initial selected option regarding the past two rules when more than one options are chosen.
Consider the below example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Selected Value</title>
<link href="css/selectbox.css" rel="style sheet">
</head>
<body>
<div id="container">
<form>
<label for="color">Select a Color</label>
<select id="color">
<option value="1">Red</option>
<option value="2">Yellow</option>
<option value="3">Green</option>
<option value="4">Blue</option>
</select>
<button id="btn">Get a Selected Value</button>
</from>
</div>
<script>
const btn = document.querySelector('#btn');
const sb = document.querySelector('#color');
btn.onclick = (event) =>
{
event.preventDefault();
alert(sb.value);
};
</script>
</body>
</html>
In this above example:
- The value attribute of the <select> element is empty when we select the initial option.
- The value attribute of a select box will be Ember.js due to the chosen option contains no value attribute when we choose the last option.
- The value attribute will be "1" or "2" when we choose the third or second option.
HTMLOptionElement type
The HTMLOptionElement type demonstrates the functionality of the <option> element within JavaScript.
This type contains the following properties:
Index - The position of the option within the collection of available options.
Selected - This property yields a true value when the respective option is chosen. We assign a true value to the selected attribute in order to designate an option as selected.
Text- It returns the text of the option.
Value- It returns the value attribute of HTML.
The <select> component includes an attribute called option, which allows us to retrieve the collection options:
selectBox.options
As an illustration, to retrieve both the value and text of the second option, we can utilize the following:
const text = selectBox.options[1].text;
const value = selectBox.options[1].value;
To retrieve a chosen option from the <select> component, in addition to a specific selection, the following code can be utilized:
let selectOption = selectBox.options [selectBox.selectedIndex];
Subsequently, we can retrieve the value and text of a chosen option using the value and text properties:
const selectedText = selectedOption.text;
const selectedValue = selectedOption.value;
When the <select> element allows for multiple selections, we can utilize a selected attribute to identify which option has been chosen:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Selected Box</title>
<link href="css/selectbox.css" rel="style sheet">
</head>
<body>
<div id="container">
<form>
<label for="color">Select one or more Colors:</label>
<select id="color" multiple>
<option value="1">Red</option>
<option value="2">Yellow</option>
<option value="3">Green</option>
<option value="4">Blue</option>
</select>
<button id="btn">Get a Selected Colors</button>
</form>
</div>
<script>
const btn = document.querySelector('#btn');
const sb = document.querySelector('#color');
btn.onclick = (e) =>
{
e.preventDefault();
const selectValues = [].filter.call(sb.options, option => option.selected).map (option => option.text);
alert(selectedValues);
};
</script>
</body>
</html>
In this illustration, the sb.option functions as an array-like entity. Consequently, it lacks the filter method that is typically associated with the Array object.
To utilize these types of methods via an array object, we employ the call method. The following code provides an array consisting of the selected options:
[].filter.call(sb.options, option => option.selected)
To retrieve the text attribute from a specific option, we can combine the result of the filter method with the map method as illustrated below:
.map(option => option.text);
To get Selected Option using for loop
The for loop can be utilized to iterate through the chosen list options to identify which one has been selected. A function can be defined to return either the reference of the selected option or its corresponding value. The following example demonstrates how to obtain the reference to a selected option:
function getSelectedOption(sel)
{
var opt;
for (var i= 0, len= sel.options.length; i<len; i++)
{
opt= sel.options[i];
if (opt.selected === true)
{
break;
}
}
return opt;
}
var opt= getSelectedOption(sel);
console.log(opt.value);
console.log(opt.text);
This function returns a single selected choice, which is suitable for a select list of the select-one variety. Conversely, the same function that is applicable to select lists of the select-multiple type can yield multiple selected choices.
Summary
- The <select> component permits us for selecting one or more options. We can include the multiple property to the <select> component for enabling more than one selections.
- The HTMLOptionElement illustrates the <option> component. The selected attribute is true if an option is chosen. The selected value and selected text attributes return the value Add the text of the chosen option.
- The HTMLSelectElement illustrates the <select> component. We can use the value and selected index for getting the value and index of the chosen option.