Foros del Web » Programando para Internet » Javascript »

Select multiple y evento onchange

Estas en el tema de Select multiple y evento onchange en el foro de Javascript en Foros del Web. Hola a tod@s. He encontrado esta duda en muchas páginas de internet pero no consigo encontrar una solución que se adapte a mi problema. La ...
  #1 (permalink)  
Antiguo 06/03/2012, 08:25
 
Fecha de Ingreso: febrero-2010
Mensajes: 295
Antigüedad: 14 años, 1 mes
Puntos: 58
Select multiple y evento onchange

Hola a tod@s.

He encontrado esta duda en muchas páginas de internet pero no consigo encontrar una solución que se adapte a mi problema.
La cosa es que tengo un select múltiple y necesito controlar la opción que se haya pulsado en ese momento. Hay una forma que me funciona en Firefox:

Código HTML:
Ver original
  1. <select multiple="multiple" id="datos" name="info">
  2.     <option value="1" onclick="datosP(this.value)">Dato 1</option>
  3.     <option value="2" onclick="datosP(this.value)">Dato 2</option>
  4.     <option value="3" onclick="datosP(this.value)">Dato 3</option>
  5.     <option value="4" onclick="datosP(this.value)">Dato 4</option>

y en javascript:

Código Javascript:
Ver original
  1. function datosP(opcion){
  2.    
  3.   alert("Has pulsado la opción" + opcion);
  4.     }

Pero esto no funciona en IE.
Para que funcione en IE hay que usar, por ejemplo, el evento onchange en el select:

Código HTML:
Ver original
  1. <select multiple="multiple" id="datos" name="info" onchange="datosP(this.value)">
  2.     <option value="1">Dato 1</option>
  3.     <option value="2">Dato 2</option>
  4.     <option value="3">Dato 3</option>
  5.     <option value="4">Dato 4</option>
Pero con esto no consigo lo que quiero. Si señalo en la opcion 1, por ejemplo, me muestra bien el mensaje, pero si ahora pulso la tecla ctrl y señalo otra opcion el mensaje siempre es que he pulsado la opcion 1. Lo más que se puede conseguir es que te muestre todas las opciones que hay seleccionadas, pero yo no quiero eso. Yo quiero saber que opcion ha sido la que he señalado la última aunque haya más opciones señaladas.
¿Habría alguna forma de conseguirlo usando onchange o usando otro evento?
Muchas gracias. Un saludo.
  #2 (permalink)  
Antiguo 06/03/2012, 08:56
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Select multiple y evento onchange

has de recorrer todas las opciones del select a cada invocación de la función. compruebas que opciones están seleccionadas y sobreescribes una variable asignándole el valor de la última opción seleccionada
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 06/03/2012, 10:03
 
Fecha de Ingreso: febrero-2010
Mensajes: 295
Antigüedad: 14 años, 1 mes
Puntos: 58
Respuesta: Select multiple y evento onchange

Hola Isabel, gracias por la respuesta.
Eso ya lo había pensado, pero no sé como hacerlo. Por ejemplo, si están señaladas las opciones 1 y 4, y ahora señalo la opción 2, ¿como puedo saber que la última que he señalado es la opción 2?
El problema también es que cada vez que señalo una opción abro un window.prompt para que el usuario escriba un dato, que luego asigno a un campo oculto para enviar al servidor. Por eso tengo que saber que opción pulsa. Pero es que si pulsa de nuevo en una opción que ya estuviera seleccionada (es decir, la desmarca), entonces tengo que borrar el dato que había escrito anteriormente.
En fin, creo que me estoy complicando demasiado la vida, cuando lo podría hacer facilmente con chekcbox, pero ya es por curiosidad el saber si se podría hacer con una lista múltiple.
He pensado si se podría hacer usando jQuery, pero mi conocimiento de esa librería es nulo o peor.
  #4 (permalink)  
Antiguo 06/03/2012, 10:17
Avatar de djaevi  
Fecha de Ingreso: marzo-2007
Ubicación: Moreno, Buenos Aires
Mensajes: 400
Antigüedad: 17 años
Puntos: 47
Respuesta: Select multiple y evento onchange

Una forma algo rebuscada, pero logicamente valida podria ser que tengas un array global, que vaya guardando las pulsaciones que va a haciendo el usuario en el select, y entonces al momento de tomar los valores lo que deberias hacer es capturar la cantidad de items seleccinados del select multiple y hacer un for recorriendo las ultimas posiciones del array (la cantidad de veces correspondiente a la cantidad de opcs seleccinadas);

por ejemplo suponete que tenes un array con las opciones seleccionadas asi;

seleccionados = [1,4,3,4,2,1,1,3,4]; (esto como digo se va generando dinamicamente, al hacer click en una opcion de tu select seria onclick=seleccionados.push(this.value); )
entonces al momento de que quieras tomar las ultimas opciones clickeadas por tu usuario verificas la cantidad de items que hay seleccionados supongamos que son 3.

entonces debes hacer un for que recorra las ultimas 3 posicioens del array x ej:

for (var i = seleccionados.length-3; i<seleccionados.length; i++) {
// aqui capturas los ultimos 3 elementos seleccionados por el usuario
}

se que es algo rebuscado pero puedes probar :P

suerte y nos cuentas como te fue
  #5 (permalink)  
Antiguo 06/03/2012, 14:52
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Select multiple y evento onchange

llevada a código la explicación a tu primer post
Cita:
function fnc(opc){
var ultima = '';
for(var i = 0; i < opc.length; i++) {
if(opc[i].selected) {
ultima = opc[i].value;
}
}
console.log(ultima);
}
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #6 (permalink)  
Antiguo 09/03/2012, 05:57
 
Fecha de Ingreso: febrero-2010
Mensajes: 295
Antigüedad: 14 años, 1 mes
Puntos: 58
Respuesta: Select multiple y evento onchange

Bueno, pues al final lo conseguí, por lo menos la primera parte, la de saber que opción ha pulsado el usuario en un select múltiple.
Isabel, tu solución no funcionaba. Muestra siempre la opción seleccionada con el valor más alto, en vez de la opción pulsada.
Lo que he hecho es utilizar un array global, como ha dicho djaevi, aunque lo he hecho más sencillo que lo que él dice. Yo he hecho lo siguiente:

Código Javascript:
Ver original
  1. var arrayOpciones = new Array(); //Es el array global
  2.  
  3. function opcionSelected(){    
  4.     var opciones = document.getElementById("datos").options;
  5.     for (var i=0; i<opciones.length; i++){        
  6.         var opcion = opciones[i].value;        
  7.         if (opciones[i].selected){            
  8.             if (!enArray(opcion)){  //enArray() busca si opcion está en arrayOpciones                              
  9.                 arrayOpciones[arrayOpciones.length]=opcion;
  10.                 alert("Has señalado la opción" + opcion);
  11.             }
  12.         }
  13.     }
  14. }

y el HTML

Código HTML:
Ver original
  1. <select multiple="multiple" id="datos" name="info" onchange="opcionSelected()">
  2.         <option value="1">Dato 1</option>
  3.         <option value="2">Dato 2</option>
  4.         <option value="3">Dato 3</option>
  5.         <option value="4">Dato 4</option>
De todas formas, como dije, esto parece que es más lógico hacerlo con checkbox, pero como ya tenía otros checkbox en el formulario quería hacerlo con una lista.
Gracias a los dos. Un saludo.

Etiquetas: evento, funcion, onchange, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:53.