[SOLUCIONADO] Listas desplegables con mismas options

[berferlo]

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.

[Tusade]

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

Si pudieras explicarte un poco más claro...

[ocp001a]

¿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.

[oshho]

Iniciado por Tusade

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

[berferlo]

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.

[ocp001a]

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:

var opciones=['verde','amarillo','rojo','azul','blanco'];//lista o menú de las opciones de los select
var seleccionados=['verde','amarillo','rojo','azul'];//lista que guardará qué se escogió en cada select, predefinimos la lista
 
function redibuja(indice,valor){//cuando un select cambie se le pasa ala función número de select y valor escogido
    seleccionados[indice]=valor;//guardamos el valor escogido
    for(var x=0;x<4;x++){//recorremos los 4 select
        var select=document.getElementById('op'+x);//apuntamos a un select
        select.length=0;//le borramos las opciones del select
        for(var j=0;j<opciones.length;j++){//recorremos la lista o menú de opciones
            var enselect=seleccionados.indexOf(opciones[j]);//para la opción actual, la buscamos en la lista de seleccionados
            if(enselect==-1 || enselect==x){//si no se ha seleccionado la opción en ningún select  o si se trata del select actual
                select.length++;//creamos una opción nueva en el select (en blanco)
                select.options[select.length-1].value=opciones[j];//le agregamos un valor a la opción
                select.options[select.length-1].text=opciones[j];//le agregamos texto
                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)
                    select.options[select.length-1].selected=true;//preseleccionamos la opción
            }
        }
    }
}
redibuja(0,'verde');//para dibujar la lista por primera vez
 

Espero te sirva.

[berferlo]

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.