Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Listas desplegables con mismas options

Estas en el tema de Listas desplegables con mismas options en el foro de Javascript en Foros del Web. Hola, buenos días. Llevo unos días rompiéndome la cabeza con este tema y se me agotan las ideas sobre como abordarlo. El tema es que ...
  #1 (permalink)  
Antiguo 23/04/2015, 08:27
 
Fecha de Ingreso: octubre-2014
Mensajes: 6
Antigüedad: 9 años, 4 meses
Puntos: 0
Listas desplegables con mismas options

Hola, buenos días.

Llevo unos días rompiéndome la cabeza con este tema y se me agotan las ideas sobre como abordarlo.

El tema es que tengo 4 listas desplegables y todas ellas cargan los mismos datos de la base de datos. Lo que quiero lograr es que al seleccionar 1 "option" en una de las listas, esa "option" deje de estar disponible en las otras 3 listas y así sucesivamente. En caso de deseleccionarla, volvería a estar disponible.

El caso es que estoy programando tipo un "comunio" y para hacer las alineaciones me es necesario. Lo máximo que he conseguido es que en la misma select, si selecciono un "option", ese valor se oculte, pero solo en esa misma select, en las demás siguen apareciendo todas las "options". Espero haberme explicado bien.

Os dejo la función que uso para controlar que no aparezca ya un jugador seleccionado en una misma select. Ahora falta que tampoco me deje seleccionar estas mismas opciones en las demás.

Código PHP:
function valselects(event)
        {    
            var 
select=(event.target); //obtenemos la select sobre la que se ha efectuado el evento
                             
            
for (var i=1;i<select.options.length;i++) //recorro opciones de la select
            
{
                if(
select.options[i].selected//si detecta una option seleccionada
                
{                   
                            
select.options[i].style.display="none"//la oculta
                
}               
                else 
//las que no están seleccionadas
                
{
                    
select.options[i].style.display="block"// se muestran
                
}
            } 
Se agradece cualquier ayuda.

Un saludo.
  #2 (permalink)  
Antiguo 23/04/2015, 10:50
 
Fecha de Ingreso: marzo-2015
Mensajes: 42
Antigüedad: 9 años
Puntos: 2
Respuesta: Listas desplegables con mismas options

No entiendo qué es lo que quieres hacer exactamente... ¿un menú desplegable?

Si pudieras explicarte un poco más claro...
  #3 (permalink)  
Antiguo 23/04/2015, 13:44
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 15 años, 10 meses
Puntos: 528
Respuesta: Listas desplegables con mismas options

¿Los select permiten múltiple selección? si es así, es algo más complicado, pero realizable.

Básicamente crea una variable por cada select, si es múltiple, deberás tener un arreglo por cada select, donde vas a guardar qué opción u opciones eligió el usuario.

Al cambiar la opción de un select, deberás recorrer los demás selects en busca del valor utilizado para ocultarlo.
  #4 (permalink)  
Antiguo 23/04/2015, 14:47
Avatar de oshho  
Fecha de Ingreso: marzo-2015
Mensajes: 40
Antigüedad: 9 años
Puntos: 0
Respuesta: Listas desplegables con mismas options

Cita:
Iniciado por Tusade Ver Mensaje
No entiendo qué es lo que quieres hacer exactamente... ¿un menú desplegable?

Si pudieras explicarte un poco más claro...
Creo que entendí lo que berferlo quiere lograr, el tiene 4 combobox, los cuales cargan los mismos datos, pero al seleccionar UNO quiere que esa seleccion desaparesca de los otros 3, por ejemplo:

combobox1: España, Brazil, USA, Canada
combobox2: España, Brazil, USA, Canada
etc..

en el combobox1 seleccionamos USA

Entonces el resto de combobox quedaría así.
España, Brazil, Canada

Poque ya seleccionamos USA en el combo 1, por lo que no estara disponible en los otros 3.

Al menos eso fue lo que entendí XD
saludos
  #5 (permalink)  
Antiguo 24/04/2015, 05:17
 
Fecha de Ingreso: octubre-2014
Mensajes: 6
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Listas desplegables con mismas options

Hola. Gracias a todos por responder.

Tusade. Efectivamente lo que quiero hacer es lo que explica el compañero oshho. Gracias por aclararlo

Ocp001a las selects no permiten elegir más de un valor cada una. En cuanto a lo que me comentas encuentro un problema. Si una opcion se selecciona la consigo ocultar. Pero si se deselecciona no me aparece de nuevo. De todos modos si pudieras digamos poner un código supuesto de tu idea, por si la ejecuto mal. Se agradece.

Sigo aun peleandome con este tema

Edito: He conseguido lo que quería pero hay un problema aun. He guardado cada select en una variable. Recorro las options con un for. Luego con un if he comprobado si estaba seleccionada la option en alguna de las listas (if lista1.options[i].selected || lista2.options[i].selected || lista3.options[i].selected). Y aquí surge mi problema. Resulta que en este if como vemos compruebo de forma fija siempre 3 listas (lista1 lista2 y lista3) pero cuando genero 4 listas o sólo 2 esta comprobación falla. Hay alguna manera de que ese if actúe exactamente en las listas que existan en ese momento? Es decir, si hay 2 listas que la condicion if solo revise dos listas . si son 3 pues revisa 3. Porque ahora lo tengo con valores fijos y no es muy volátil.

Última edición por berferlo; 24/04/2015 a las 08:07
  #6 (permalink)  
Antiguo 24/04/2015, 15:41
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 15 años, 10 meses
Puntos: 528
Respuesta: Listas desplegables con mismas options

Pensado un poco más detenidamente el problema hice esta solución, aunque lo que propongo es borrar y reconstruir todos los select con cada cambio.


<select id="op0" onchange="redibuja(0,this.value)"></select>
<select id="op1" onchange="redibuja(1,this.value)"></select>
<select id="op2" onchange="redibuja(2,this.value)"></select>
<select id="op3" onchange="redibuja(3,this.value)"></select>


Código Javascript:
Ver original
  1. var opciones=['verde','amarillo','rojo','azul','blanco'];//lista o menú de las opciones de los select
  2. var seleccionados=['verde','amarillo','rojo','azul'];//lista que guardará qué se escogió en cada select, predefinimos la lista
  3.  
  4. function redibuja(indice,valor){//cuando un select cambie se le pasa ala función número de select y valor escogido
  5.     seleccionados[indice]=valor;//guardamos el valor escogido
  6.     for(var x=0;x<4;x++){//recorremos los 4 select
  7.         var select=document.getElementById('op'+x);//apuntamos a un select
  8.         select.length=0;//le borramos las opciones del select
  9.         for(var j=0;j<opciones.length;j++){//recorremos la lista o menú de opciones
  10.             var enselect=seleccionados.indexOf(opciones[j]);//para la opción actual, la buscamos en la lista de seleccionados
  11.             if(enselect==-1 || enselect==x){//si no se ha seleccionado la opción en ningún select  o si se trata del select actual
  12.                 select.length++;//creamos una opción nueva en el select (en blanco)
  13.                 select.options[select.length-1].value=opciones[j];//le agregamos un valor a la opción
  14.                 select.options[select.length-1].text=opciones[j];//le agregamos texto
  15.                 if(select.options[select.length-1].value==seleccionados[x])//si la opción agregada es la opción seleccionada en el select (de la lista guardada)
  16.                     select.options[select.length-1].selected=true;//preseleccionamos la opción
  17.             }
  18.         }
  19.     }
  20. }
  21. redibuja(0,'verde');//para dibujar la lista por primera vez




Espero te sirva.

Última edición por ocp001a; 24/04/2015 a las 15:47
  #7 (permalink)  
Antiguo 25/04/2015, 04:57
 
Fecha de Ingreso: octubre-2014
Mensajes: 6
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Listas desplegables con mismas options

Muchas gracias ocp001a. Venia para comentar que ya he conseguido lo que buscaba y he visto tu ayuda. La he probado y también funciona. Publicaría el código de como lo he conseguido finalmente pero no tengo internet mas allá del móvil ahora y me es complicado ponerlo.

Gracias a todos por ayudar. Problema resuelto.

Etiquetas: desplegables, listas, select, valor
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 05:16.