Ver Mensaje Individual
  #6 (permalink)  
Antiguo 24/04/2015, 15:41
ocp001a
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 16 años, 7 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