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.
Por eso es que en este post veremos cómo trabajar con el elemento select de HTML desde jQuery. Veremos cómo:
Todo esto con jQuery, si quieres ver cómo se hace con JavaScript puro mira este post.
Nota: si quieres ver la demostración de lo que haremos aquí puedes entrar a este enlace.
Si tenemos un elemento con el id miSelect lo obtenemos así:
Eso deberíamos hacerlo en el $(document).ready
, cosa que veremos en el ejemplo demostrativo.
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:
Estamos indicando que en el evento change
se llame a la función opcionCambiada
, en donde simplemente imprimimos un mensaje.
Existen varias maneras pero yo prefiero crear un elemento de tipo option
, establecer sus propiedades y agregarlo (append
) al select
.
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.
Solo hay que llamar al método empty.
Eso removerá todas las opciones del select.
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:
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.
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í:
El código del script que espera a que el documento esté listo con jQuery es así:
Recuerda que se puede probar aquí.
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.
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.