Como obter o valor da opção selecionada da lista suspensa em JavaScript

Para obter a escolha atual de um menu suspenso HTML, leia a propriedade value do elemento select. Adicione um ouvinte de evento change quando a página deve responder à medida que o utilizador escolhe outra opção; o evento funciona tanto para a seleção com o teclado como com o ponteiro.

Obter o valor da opção selecionada de um menu suspenso em JavaScript

Coloque o elemento de saída ao lado do menu suspenso e carregue o script depois desta marcação: <label for="plan">Plan</label> <select id="plan"><option value="starter">Starter plan</option><option value="pro" selected>Pro plan</option></select> <output id="chosen-plan"></output>. Cada opção tem um valor legível por máquina e um rótulo legível. O atributo selected torna pro a escolha inicial, para que a página o possa mostrar antes de o utilizador alterar o que quer que seja.

O JavaScript encontra esses dois elementos pelos respetivos ID. Ele fica à escuta de uma alteração na seleção, copia o valor atual para a saída e chama a mesma função uma vez para mostrar a escolha inicial:

const planSelect = typeof document === "undefined"
  ? {
      value: "pro",
      addEventListener(eventName, handler) {
        this.changeHandler = handler;
      }
    }
  : document.querySelector("#plan");
const chosenPlan = typeof document === "undefined"
  ? { textContent: "" }
  : document.querySelector("#chosen-plan");

function showChosenPlan() {
  chosenPlan.textContent = planSelect.value;
  console.log(chosenPlan.textContent);
}

planSelect.addEventListener("change", showChosenPlan);
showChosenPlan();

pro

Num navegador, document.querySelector("#plan") encontra o elemento select e document.querySelector("#chosen-plan") encontra o elemento de saída. Os objetos de recurso são utilizados quando o exemplo é executado onde não existe um documento do navegador; eles fornecem o mesmo valor inicial pro para a execução do exemplo fornecida. A saída mostra o valor da opção selecionada, que é pro, em vez do seu rótulo visível, Pro plan.

O ouvinte change é executado depois de o utilizador escolher uma opção diferente, quer utilize um ponteiro ou o teclado. A chamada inicial a showChosenPlan() é separada porque registar um ouvinte não dispara, por si só, um evento change. Se o utilizador escolher Starter plan, a saída passa a ser starter; o valor apresentado depende, assim, da escolha atual, em vez de seguir uma sequência fixa.

Utilize planSelect.value diretamente quando só precisa da seleção atual uma vez. Se precisar do rótulo visível em vez do valor, leia planSelect.selectedOptions[0].textContent. O value de um elemento select é uma string; converta-o explicitamente, como com Number(planSelect.value), se o seu código precisar de um número.

Mantenha os ID na marcação e os seletores no script alinhados. Se um seletor for executado antes de o seu elemento existir, querySelector devolve null; coloque o script depois da marcação ou aguarde até o documento ter carregado. Se forem adicionadas opções mais tarde, o ouvinte continua a poder ler o valor selecionado a partir do elemento select quando o utilizador altera a seleção.