JavaScript Tutorial
JavaScript Basics
JavaScript Objects
- js-object
- js-array
- js-string
- js-date
- js-math
- js-number
- js-boolean
JavaScript BOM
JavaScript DOM
JavaScript Validation
- js-form-validation
- js-email-validation
JavaScript OOPs
JavaScript Cookies
JavaScript Events
Exception Handling
- js-exception-handling
- javascript-try-catch
JavaScript Misc
JavaScript Advance
Differences
- jquery-vs-javascript
- javascript-vs-php
Questions
Interview Questions
- javascript-i/q

JavaScript Select Option

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

HTML Select Option

A elements for forming a <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 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 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

How it works:

Initially, select the element's value property relies on the 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 component contains an option attribute that permits us for accessing the collection options:
  
  selectBox.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 let selectOption = selectBox.options [selectBox.selectedIndex];
  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 <!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:
  
  [].filter.call(sb.options, option => option.selected)
  
  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:
  
  .map(option => option.text);
  
  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 component for enabling more than one selections.
  - The HTMLOptionElement illustrates the
  - The HTMLSelectElement illustrates the