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.
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:
The HTMLSelectElement type contains the following helpful attributes:
The example indicates how to obtain the selected option index which is mentioned below:
How it works:
Consider the below example:
In this above example:
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:
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.