Javatpoint Logo
Javatpoint Logo

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:

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:

HTMLSelectElement type

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

The HTMLSelectElement type contains the following helpful attributes:

JavaScript Select Option
  • 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:

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:

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:

JavaScript Select Option

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:

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:

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

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:

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.





Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA