JavaScript Select Option

We will understand how to manage <select> option in JavaScript in this tutorial.

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> option permits us to choose one option at a time which is mentioned above.

If we wish more than one selections, we can include <select>attribute to <multiple> elements 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

We use the HTMLSelectElement type for interacting with <select>option in JavaScript.

The HTMLSelectElement type contains the following helpful attributes:

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 apply the DOM API like querySelector() or getElementById().

The example indicates how to obtain the selected option index which is mentioned 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 illustrates the <option> element in JavaScript.

This type contains the following properties:

Index- The option's index within the group of options.

Selected- It returns a true value if the option is chosen. We set the selected property true for selecting an option.

Text- It returns the text of the option.

Value- It returns the value attribute of HTML.

The <select> component contains an option attribute that permits us for accessing the collection options:

For example, for accessing the value and text of the second option, we use the below:

const text = selectBox.options[1].text;
const value = selectBox.options[1].value;

For getting a selected option of the <select> component along with an individual selection, we use the below code:

After that, we can access the value and text of a selected option by value and text properties:

const selectedText = selectedOption.text;
const selectedValue = selectedOption.value;

When the <select> component permits more than one selections, we can use a selected attribute for determining which option is selected:

<!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 the example, the sb.option is the array-like object. Hence, it does not contain the filter() method same as the Array object.

For borrowing these types of methods through an array object, we use a call() method, the below gives the array of chosen options:

And for getting the text attribute of any option, we can chain the outcome of a filter() method along with a map() method like below:

To get Selected Option using for loop

WE can use the for loop for iterating by the selected list options for determining which is chosen. A function could be described for returning the reference to a selected option or the value. The below gives 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 gives a single chosen option, which is compatible for the select-one type of select list. The same function compatible for select-multiple type pf select lists could give more than one selected option.

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.

Next TopicGet and Set Scroll Position of an Element

← prev next →