JavaScript Select Option

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

HTML Select Option

A option facilitate us the options list. It permits us to choose a single or more than one option. We use the

For example:

The

If we wish more than one selections, we can include

HTMLSelectElement type

We use the HTMLSelectElement type for interacting with

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
  • 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

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
  • 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

  • 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
  • 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

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

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

For getting a selected option of the

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

When the

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 component for enabling more than one selections.
  • The HTMLOptionElement illustrates the
  • The HTMLSelectElement illustrates the

Next Topic#




Contact US

Email:[email protected]

JavaScript Select Option
10/30