Cómo obtener el valor de la opción seleccionada de la lista desplegable en JavaScript

Para obtener la elección actual de un menú desplegable HTML, lea la propiedad value del elemento select. Añada un detector de eventos change cuando la página deba responder a medida que el usuario elige otra opción; el evento funciona tanto con la selección mediante teclado como con el puntero.

Obtener el valor de la opción seleccionada de un menú desplegable en JavaScript

Coloque el elemento de salida junto al menú desplegable y cargue el script después de este marcado: <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 opción tiene un valor legible por máquina y una etiqueta legible. El atributo selected hace que pro sea la elección inicial, de modo que la página puede mostrarla antes de que el usuario cambie nada.

El JavaScript localiza esos dos elementos por sus ID. Escucha un cambio en la selección, copia el valor actual en la salida y llama una vez a la misma función para mostrar la elección 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

En un navegador, document.querySelector("#plan") encuentra el elemento select y document.querySelector("#chosen-plan") encuentra el elemento de salida. Los objetos de reserva se utilizan cuando el ejemplo se ejecuta donde no hay un documento de navegador; proporcionan el mismo valor inicial pro para la ejecución del ejemplo suministrada. La salida muestra el valor de la opción seleccionada, que es pro, en lugar de su etiqueta visible, Pro plan.

El detector change se ejecuta después de que el usuario elige una opción diferente, ya sea con un puntero o con el teclado. La llamada inicial a showChosenPlan() es independiente porque registrar un detector no dispara por sí mismo un evento change. Si el usuario elige Starter plan, la salida se convierte en starter; por tanto, el valor mostrado depende de la elección actual en lugar de seguir una secuencia fija.

Use planSelect.value directamente cuando solo necesite la selección actual una vez. Si necesita la etiqueta visible en lugar del valor, lea planSelect.selectedOptions[0].textContent. El value de un elemento select es una cadena; conviértalo explícitamente, por ejemplo con Number(planSelect.value), si su código necesita un número.

Mantenga alineados los ID del marcado y los selectores del script. Si un selector se ejecuta antes de que exista su elemento, querySelector devuelve null; coloque el script después del marcado o espere hasta que el documento se haya cargado. Si se añaden opciones más tarde, el detector aún puede leer el valor seleccionado del elemento select cuando el usuario cambia la selección.