Obtener el valor de un select con jQuery

Obtener el valor de un select con jQuery

En este tutorial aprenderemos varias formas para obtener el valor de un select con jQuery.

Método resumido

De esta forma se obtiene el contenido del atributo value del option seleccionado.

<select id="menu">
   <option value="1">Opción 1</option>
   <option value="2" selected=selected>Opción 2</option>
   <option value="3">Opción 3</option>
</select>
<script>
  let selectValue = $("#menu").val();
  // selectValue vale 2
</script>

Obtener el valor del option seleccionado de un select

Podemos obtener el valor del option seleccionado de la siguiente forma

<select id="menu">
   <option value="1">Opción 1</option>
   <option value="2" selected=selected>Opción 2</option>
   <option value="3">Opción 3</option>
</select>
<script>
  let selectValue = $("#menu").find("option:selected").val();
  // selectedValue vale 2
</script>

Obteniendo el texto del option seleccionado

Podemos obtener el texto de un option si sabemos su valor

<select id="menu">
   <option value="1">Opción 1</option>
   <option value="2" selected=selected>Opción 2</option>
   <option value="3">Opción 3</option>
</select>
<script>
  let selectValue = $("#menu option[value='2']").text();
  // selectedValue vale 2
</script>

Obtener el contenido del option seleccionado

Podemos obtener el texto del primer option de la siguiente forma

<select id="menu">
   <option value="1">Opción 1</option>
   <option value="2" selected=selected>Opción 2</option>
   <option value="3">Opción 3</option>
</select>
<script>
  let selectText = $("#menu").find("option:selected").html();
  // selectText vale "Opción 2"
</script>

Obtener el texto del primer option

Podemos obtener el texto del primer option de la siguiente forma

<select id="menu">
   <option value="1">Opción 1</option>
   <option value="2" selected=selected>Opción 2</option>
   <option value="3">Opción 3</option>
</select>
<script>
  let selectText = $("#menu").find("option").first().text();
  // selectText vale "Opción 1"
</script>

Más tutoriales de jQuery