Opção atualmente selecionada em JavaScript

1. Use o HTMLSelectElement.options para obter a opção atual de uma lista de seleção usando JavaScript
2. Use o HTMLSelectElement.selectedOptions para obter a opção atual de uma lista de seleção usando JavaScript

Podemos ter diferentes tipos de formulários em páginas da web, onde cada campo é de algum tipo. Às vezes, temos que escolher uma opção da lista suspensa. O elemento <select> é usado para criar uma lista suspensa. As tags <option> dentro da tag <select> são usadas para definir opções na lista suspensa.

Este tutorial irá apresentar como obter a opção atualmente selecionada no elemento <select> usando JavaScript.

Use o HTMLSelectElement.options para obter a opção atual de uma lista de seleção usando JavaScript

A propriedade HTMLSelectElement.options retorna o HtmlOptionsCollections dos elementos <option> presentes no elemento <select>.

Podemos criar uma função que mostrará o valor da opção selecionada na lista.

Verifique o código abaixo

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);
}

O selectedIndex retorna o índice da opção selecionada.

Use o HTMLSelectElement.selectedOptions para obter a opção atual de uma lista de seleção usando JavaScript

Este HTMLSelectElement.selectedOptions contém a lista de todos os elementos <option> que são definidos no elemento <select> que são selecionados.

Verifique o código abaixo.

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);
}

Esse método geralmente não funciona no Internet Explorer.