Opción seleccionada actualmente en JavaScript

1. Utilice HTMLSelectElement.options para obtener la opción actual de una lista de selección utilizando JavaScript
2. Utilice HTMLSelectElement.selectedOptions para obtener la opción actual de una lista de selección utilizando JavaScript

Podemos tener diferentes tipos de formularios en páginas web, donde cada campo es de algún tipo. A veces, tenemos que elegir una opción de la lista desplegable. El elemento <select> se utiliza para crear una lista desplegable. Las etiquetas <option> dentro de la etiqueta <select> se utilizan para definir opciones en la lista desplegable.

Este tutorial presentará cómo obtener la opción seleccionada actualmente en el elemento <select> usando JavaScript.

Utilice HTMLSelectElement.options para obtener la opción actual de una lista de selección utilizando JavaScript

La propiedad HTMLSelectElement.options devuelve las HtmlOptionsCollections de los elementos <option> presentes en el elemento <select>.

Podemos crear una función que mostrará el valor de la opción seleccionada de la lista.

Verifique el código a continuación.

Código HTML:

<select id="cars" onchange="select()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Código JavaScript:

var selection = document.getElementById('cars');
function select() {
  alert(selection.options[selection.selectedIndex].value);
}

El selectedIndex devuelve el índice de la opción seleccionada.

Utilice HTMLSelectElement.selectedOptions para obtener la opción actual de una lista de selección utilizando JavaScript

Este HTMLSelectElement.selectedOptions contiene la lista de todos los elementos <option> que están definidos en el elemento <select> que están seleccionados.

Verifique el código a continuación.

Código HTML:

<select id="cars" onchange="select()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Código JavaScript:

var selection = document.getElementById('cars');
function select() {
  alert(selection.selectedOptions[0].value);
}

Este método generalmente no funciona en Internet Explorer.