Select y jQuery: obtener seleccionado, agregar opción, limpiar y escuchar cambios

jQuery y select - Manipular elemento HTML

jQuery sigue siendo una librería usada en estos últimos tiempos. Me atrevo a decir que es el framework más usado en el entorno de JavaScript, aunque claro, existen mejores por mucho, pero no vamos a discutir eso hoy.

La librería de jQuery y su forma de seleccionar los elementos permite interactuar con los mismos de una manera muy fácil, pero debemos aprender los métodos.

jQuery y select – Manipular elemento HTML

Por eso es que en este post veremos cómo trabajar con el elemento select de HTML desde jQuery. Veremos cómo:

Obtener elemento seleccionado del select (la opción)
Agregar una opción al select
Limpiar el select, es decir, remover todas las opciones
Escuchar cuando el usuario seleccione otra opción del select.

Todo esto con jQuery, si quieres ver cómo se hace con JavaScript puro mira este post.

Obtener select desde jQuery

Si tenemos un elemento con el id miSelect lo obtenemos así:

const $select = $("#miSelect");

Eso deberíamos hacerlo en el $(document).ready, cosa que veremos en el ejemplo demostrativo.

Escuchar cuando la opción cambie

Si el usuario selecciona otra opción del select, podemos saberlo. Simplemente agregamos un listener (con la simplicidad de jQuery) y listo.

El código a continuación lo demuestra:

const opcionCambiada = () => {
  console.log("Cambio");
};

$select.change(opcionCambiada);

Estamos indicando que en el evento change se llame a la función opcionCambiada, en donde simplemente imprimimos un mensaje.

Agregar opción a select con jQuery

Existen varias maneras pero yo prefiero crear un elemento de tipo option, establecer sus propiedades y agregarlo (append) al select.

const agregar = () => {
  const valor = new Date().getTime();
  $select.append($("<option>", {
    value: valor,
    text: valor
  }));
};

Para crear el elemento llamamos a $("<option>", {}) y como segundo argumento pasamos un objeto que serán los atributos de la opción. El resultado lo añadimos al select.

Limpiar select con jQuery

Solo hay que llamar al método empty.

const limpiar = () => {
  $select.empty();
};

Eso removerá todas las opciones del select.

Obtener elemento seleccionado

Hay que seleccionar de nuevo usando el id y el selector de :selected. Para obtener el valor usamos val() y para el texto text() como se ve a continuación:

const mostrar = () => {
  const valor = $("#miSelect :selected").val(),
    texto = $("#miSelect :selected").text();
  alert(`Texto: ${texto}. Valor: ${valor}`);
};

El valor y el texto son cosas distintas. El texto es lo que el usuario ve y en el valor podríamos poner simplemente un identificador o algo más amigable para trabajar con los datos.

Poniendo todo junto

Para reforzar lo aprendido veamos un ejemplo en donde ponemos botones y trabajamos con el select desde jQuery. El código HTML, incluyendo la carga de la librería queda así:

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>Select con jQuery</title>
 <link href="style.css" rel="stylesheet" type="text/css" />
 <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
  crossorigin="anonymous">

 </script>
</head>

<body>
 <h1>Select con jQuery</h1>
 <p>
  <a target="_blank" href="//parzibyte.me/blog">By Parzibyte</a>
 </p>
 <select id="miSelect"></select>
    <br>
    <button id="btnAgregar">Agregar</button>
    <button id="btnLimpiar">Limpiar</button>
    <button id="btnMostrar">Mostrar seleccionado</button>
    <script src="script.js"></script>
  </body>
</html>

El código del script que espera a que el documento esté listo con jQuery es así:

$(document).ready(function () {
  const $select = $("#miSelect");

  const opcionCambiada = () => {
    console.log("Cambio");
  };

  $select.change(opcionCambiada);
  const agregar = () => {
    const valor = new Date().getTime();
    $select.append($("<option>", {
      value: valor,
      text: valor
    }));
  };

  const limpiar = () => {
    $select.empty();
  };

  const mostrar = () => {
    const valor = $("#miSelect :selected").val(),
      texto = $("#miSelect :selected").text();
    alert(`Texto: ${texto}. Valor: ${valor}`);
  };

  $("#btnAgregar").click(agregar);
  $("#btnLimpiar").click(limpiar);
  $("#btnMostrar").click(mostrar);
});

Conclusión

Si bien jQuery proporciona métodos para manejar los elementos (y obtenerlos usando los selectores) debemos aprender otras funciones que la librería incorpora.

Recomiendo aprender todo desde cero, es decir, comenzando con JavaScript y después usar una librería.

Por cierto, en los ejemplos utilizo funciones flecha, pero puedes usar funciones con function normalmente, es cosa tuya.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/