jQuery es un framework cuyo uso se hace casi inevitable para todos aquellos que usamos de forma intensiva JavaScript. El manejo de las listas de elementos en un sitio web, con la etiqueta <select>, es algo básico en el manejo de datos presentados en formularios.
De cara a validar, gestionar, editar, insertar… es decir, hacer todo tipo de operaciones con los datos en el cliente, necesitamos de JavaScript pero su uso es tedioso. jQuery lo hace simple e inmediato. Veamos el caso concreto del manejo del <select>.
Veamos, tenemos el siguiente listado en un sitio, vemos el código directamente en HTML:
<select id="miselect"> <option value="1">Ubuntu</option> <option value="2">Fedora</option> <option value="3">Red Hat</option> <option value="4">Debian</option> </select>
Para cada elemento tenemos dos datos:
Comencemos a tratarlo.
Seleccionar el elemento
La sintaxis de los selectores de jQuery está basada en la de CSS. En este caso elegir el <select> dentro del DOM del documento sería como sigue:
$("#miselect") Obtener el valor del ítem seleccionado
Sobre el selector aplicamos la función val():
var mivalor = $("#miselect").val() Obtener el texto del ítem seleccionado
Análogo al anterior, pero no podemos directamente usar la función text(). En caso de usarla directamente tendríamos una cadena con todos los textos que aparecen en el <select>. Para asegurarnos que tenemos sólo el texto del elemento seleccionado incluimos en el selector “option:selected”.
var mitexto = $("#miselect option:selected").text() Controlar el cambio de valor elegido
También es importante controlar cuándo cambia el valor elegido. Para manejar este evento usamos el siguiente código:
$("#miselect").change(function() {
alert("Han cambiado mi valor");
}); Elegir un valor desde el código
En este caso usaremos la función val() pero en lugar de usarla sin parámetros, le pasaremos un entero, con esta sobrecarga se comporta tal como queremos. Elegimos el segundo valor para nuestro ejemplo:
$("#miselect").val(2) Añadir más valores en el cliente
Usamos la función appendTo():
$("<option value='5'>Scientific Linux</option>").appendTo("#miselect"); Modificar el contenido interno en el cliente
Si queremos un cambio más radical, porque hayamos recibido una información de una petición AJAX tenemos la función html():
$("#miselect").html(nuevosDatos); Como veis todas estas operaciones son muy simples cuando usamos jQuery, ¿alguien quiere apuntar vía comentario cómo serían las mismas operaciones usando JavaScript directamente?
https://www.youtube.com/embed/z-xGk9c_eOw Guionista y locutor: Manuel Ignacio López Quintero.Fecha de publicación: 31 de diciembre de 2024.
Ver comentarios
¿Cómo se puede hacer para lanzar un evento onchange en todos los select que haya en la página?
$("select").onchange no funciona.
Muchas gracias por la aclaración, me sacaste de tremando cacho!!! Saludos desde chile!
¡Todo un placer poder ser de ayuda!
hola, alquien que me ayude... tengo un template que todos los .js me los incluye en scripts.js asi se llama el documento aqui me lee los js del HEAD del html, entonces incorpore un combobox, y este me genera un
$(document).ready(function(){ etc... me lo lee si quito el script de lo contrario no, porque me imagino no lo incluyo en el scripts.js, lo cual no se como ingresar o si hay otra alternativa, ya que esto me indica que lo coloque en el head. alguien me ayude me urge...
El tema del template, podrías evitarlo usando Minify, para reducir peticiones HTTP (derivadas de tener varios ficheros JS).
Como parche temporal, incluye el script con el combobox "a pelo" en el HTML en cuestión.
Hola.
Tengo dos combos que se cargan vía AJAX. Necesito obtener el valor seleccionado del segundo combo. Con "$("#miselect").change(function()" me parece lo perfecto, pero, no soy capaz de que me devuelva el valor.
Lo meto en un dentro del formulario o bien en un dentro del fichero .js que contiene el JQuery.
En ningún caso obtengo el valor.
¿Dónde debo declarar el código: $("#miselect").change(function()?
Muchas gracias. dentro del formulario o bien en un dentro del fichero .js que contiene el JQuery.
En ningún caso obtengo el valor.
¿Dónde debo declarar el código: $("#miselect").change(function()?
Muchas gracias.
Buenas Pedro,
Acerca del dónde, o lo pones abajo del select para que el DOM ya esté cargado o por seguridad, lo incluyes dentro del típico bloque document.ready.
Luego para tratar con el elemento elegido usamos $(this):
$(document).ready(function() {
$("#my-select").change(function() {
alert($(this).val());
});
});
Hola F. Javier.
Muchas gracias por tu respuesta.
Lo tengo puesto en el bloque document.ready y no me da el valor.
La rutina que me has puesto la tengo metida dentro de un fichero .js.
Este fichero está referencia dentro de una página PHP.
ME aseguro que el nombre del SELECT sea correcto.
El alert no aparece, así que asumo que no está funcionando el evento .change
Un saludo.
@platasa:disqus mi recomendación:
1. Quita el fichero JS y referencia el script directamente abajo en tu body por si acaso
2. Comprueba que el ID es correcto
3. Saca la consola de depuración de Google Chrome y mira a ver si hay algún error de algún tipo, al interpretar el código o en tiempo de ejecución
Hola F. Javier.
Muchas gracias por el apoyo.
1.- Hecho.
2.- Hecho.
3.- Lo más simple a veces es lo más oculto, no había llamado a la consola de depuración.
Algo hago mal, da error en:
$(document).ready(function(){
Dice: Uncaught ReferenceError: $ is not defined.
Hago algo mal seguro.
He puesto el bloque de instrucciones:
$(document).ready(function(){
$("#TiposEntrenamientos").change(function(){
alert($(this).val());
//$('#capa').html(op);
});
});
TE pego todo el script completo por si me puedes indicar, por favor, dónde debiera ubicarlo:
function nuevoAjax()
{
/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
lo que se puede copiar tal como esta aqui */
var xmlhttp=false;
try
{
// Creacion del objeto AJAX para navegadores no IE
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
// Creacion del objet AJAX para IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E)
{
if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
}
}
return xmlhttp;
}
// Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
var listadoSelects=new Array();
listadoSelects[0]="Objetivos";
listadoSelects[1]="TiposEntrenamientos";
function buscarEnArray(array, dato)
{
// Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
var x=0;
while(array[x])
{
if(array[x]==dato) return x;
x++;
}
return null;
}
function cargaContenido(idSelectOrigen)
{
// Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
// Obtengo el select que el usuario modifico
var selectOrigen=document.getElementById(idSelectOrigen);
// Obtengo la opcion que el usuario selecciono
var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
// Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
if(opcionSeleccionada==0)
{
alert(opcionSeleccionada);
var x=posicionSelectDestino, selectActual=null;
// Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
while(listadoSelects[x])
{
selectActual=document.getElementById(listadoSelects[x]);
selectActual.length=0;
var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opción...";
selectActual.appendChild(nuevaOpcion); selectActual.disabled=true;
x++;
}
}
// Compruebo que el select modificado no sea el ultimo de la cadena
else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
{
// Obtengo el elemento del select que debo cargar
var idSelectDestino=listadoSelects[posicionSelectDestino];
var selectDestino=document.getElementById(idSelectDestino);
// Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
var ajax=nuevoAjax();
ajax.open("GET", "select_dependientes_proceso.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==1)
{
// Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
selectDestino.length=0;
var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;
}
if (ajax.readyState==4)
{
selectDestino.parentNode.innerHTML=ajax.responseText;
}
}
ajax.send(null);
}
}
// Así accedemos al Texto de la opción seleccionada
//var valor = $("#Objetivos option:selected").html();
$(document).ready(function(){
$("#TiposEntrenamientos").change(function(){
alert($(this).val());
//$('#capa').html(op);
});
});
De nuevo, MUCHAS GRACIAS.
Un saludo.
¿Has incorporado jquery? Recuerda que tienes que referenciarlo.
Hola F. Javier.
Gracias por el esfuerzo :-)
HE referenciado a JQuery.
En un select sin acceso a base de datos me funciona.
En el formulario tengo dos select, uno tiene los datos de una tabla y el otro tiene los datos de una tabla con registros relacionados del primer select.
En el primer select me funciona y obtengo el valor.
Con el segundo select no consigo el valor.
Seguiré intentando cosas.
Un saludo.
Mira a ver:
1) Si generas el DOM correctamente
2) Mira el identificador, no puede estar repetido
3) Atento a la consola, siempre puede haber errores tontos que no ves
Muchas gracias por tu esfuerzo.
He acabado buscando otras alternativas y no he utilizado ajax en esta página.
Sinceramente, muy agradecido por todo.
Un saludo.
@platasa:disqus para eso estamos, si tienes más dudas no tienes más que preguntar por aquí.
Mil gracias me sirvió muchísimo!!!!
Muchas gracias a ti por seguirnos, es un placer que el trabajo de uno resulte tan útil :)
Como hago para pasar esta variable a php?
var codes = $("#category").val();
es imposible pasar variables de javascript a php y viceversa... lo que puedes hacer es usar ajax para mandarlo a un script php o al reves escribir las variables al vuelo en un formulario con los valores de value de los imputs...
con esto funciona
$("#depto").combobox({
select: function(event, ui) {
alert($(this).val());
}
});
Gracias por el apunte, es otra forma de hacerlo.
Excelente explicación
me toco trabajar con el manejo de elementos en DOM, y se me presentaron problemas por ejemplo evitar que se cambie el valor seleccionado al momento de cambiar entre paginas o simplemente recargarla alguna sugerencia
gracias hermano
Como hago para seleccionar una de las opciones del combobox con jquery?
Estoy aplicando el hash y quiero que según el valor de ese hash me seleccione una de las opciones del combobox de ese mismo valor.
Si eliges según el valor la orden es:
$("#miselect").val(2)
Si eliges según el nombre del option la orden sería:
var mi_busqueda = "algo de texto";
$('#state option[value="' + mi_busqueda + '"]').prop('selected', true);
Hola buenas, verás mi duda es la siguiente, tengo 3 combobox en un formulario y quiero que no se repita la opcion elegida en otros combobox. Por ejemplo, tenemos las opciones 1,2,3,4,5 en el primer combobox estaria elegida la 1 y las otras serian 4,5 , en el segundo combobox la opcion elegida seria 2 y las otras 4,5 y en el tercer combobox la elegida seria 3 y las otras 4,5. Si ahora el primer combobox pone selected la 4 a los otros comboobx se le cambiaria la opcion 4 por la 1. ¿ Podría ayudarme mediante código? Gracias
jQuery(document).ready(function(){
var mitexto='';
var path = "/empleados";
$.ajax({
url:path + "/Manobra/getDatos",
success: function (data) {
for(x=0;x<data.length;x++){
jQuery("#mio").append(""+data[x].Nombres);
}
$("#mio").chosen().change(function() {
mitexto = $("#mio ").val();
$('#tabselect1').append(" "+mitexto+"n
n
");
});
}
});
});
tengo este codigo q consulta a una base msql quiero q me retorne los campos nombres
pero cuando retornar
lo hace asi
Nombre1 esto en la tabla en la primera fila
Nombre1,Nombre2 en la siguiente fila y asi cada q voy selecionado xfa una ayuda gracias