Modificar listas, selects al seleccionar opcion

[m1991lp]

Buenos días a todos, necesito vuestra ayuda, estoy trabajando en wordpress, aunque mi duda es de Javascript.

Tengo una página donde tengo 2 bucles, que construyen 10 selects con diferentes opciones (equipos de futbol). Lo que quiero hacer es que cuando en el 1r select se seleccione un equipo, este no esté disponible en todos los demás selects...

De manera que vayan quedando cada vez menos equipos, cuando los vas seleccionando..

No se si me he explicado muy bien, pero pondré un pequeño ejemplo.

Si en el primer select, selecciono el Barcelona, este NO deberñia aparecer en las demás listas. Para llamar la función javascript, uso el Onclick y le paso el equipo (al menos en eso habia pensado).

Espero que me podais ayudar porque voy bastante perdido xD Gracias!.

Mis selects son los siguientes:

Código PHP:

<?php
        echo "<form id='acMarc' name='acMarc'><table id='tablaActMarc'><th>";
            for($i=0;$i<10;$i++){
                echo "<select class='selects' id='selActMarcL' name='selL'>
                <option selected='selected'>Seleccione Equipo</option>
                <option id='Barcelona' value='Barcelona' onclick='javascript:quitarEquipo(1);'>Barcelona</option>
                <option id='Madrid' value='Madrid' onclick='javascript:quitarEquipo(2);'>Madrid</option>
                <option id='Valencia' value='Valencia' onclick='javascript:quitarEquipo(3);'>Valencia</option>
                <option id='Malaga' value='Malaga' onclick='javascript:quitarEquipo(4);'>Malaga</option>
                <option id='Levante' value='Levante' onclick='javascript:quitarEquipo(5);'>Levante</option>
                <option id='Atletico' value='Atletico' onclick='javascript:quitarEquipo(6);'>Atletico</option>
                <option id='Mallorca' value='Mallorca' onclick='javascript:quitarEquipo(7);'>Mallorca</option>
                <option id='Athletic' value='Athletic' onclick='javascript:quitarEquipo(8);'>Athletic</option>
                <option id='Osasuna' value='Osasuna' onclick='javascript:quitarEquipo(9);'>Osasuna</option>
                <option id='Sevilla' value='Sevilla' onclick='javascript:quitarEquipo(10);'>Sevilla</option>
                <option id='Betis' value='Betis' onclick='javascript:quitarEquipo(11);'>Betis</option>
                <option id='Getafe' value='Getafe' onclick='javascript:quitarEquipo(12);'>Getafe</option>
                <option id='Espanyol' value='Espanyol' onclick='javascript:quitarEquipo(13);'>Espanyol</option>
                <option id='RealSociedad' value='RealSociedad' onclick='javascript:quitarEquipo(14);'>Real Sociedad</option>
                <option id='Granada' value='Granada' onclick='javascript:quitarEquipo(15);'>Granada</option>
                <option id='Villareal' value='Villareal' onclick='javascript:quitarEquipo(16);'>Villareal</option>
                <option id='Rayo' value='Rayo' onclick='javascript:quitarEquipo(17);'>Rayo</option>
                <option id='Zaragoza' value='Zaragoza' onclick='javascript:quitarEquipo(18);'>Zaragoza</option>
                <option id='Sporting' value='Sporting' onclick='javascript:quitarEquipo(19);'>Sporting</option>
                <option id='Racing' value='Racing' onclick='javascript:quitarEquipo(20);'>Racing</option>
                </select><br>";
            }
            echo "</th><th>";
            for($b=0;$b<10;$b++){
                echo "<center><input type='text' id='Gol$b' class='gol'>-<input type='text' id='Gol$b+1' class='gol'><br></center>";
            }
            echo "</th><th>";
            for($b=0;$b<10;$b++){
                echo "<select class='selects' id='selActMarcR' name='selR$i'>
                <option selected='selected'>Seleccione Equipo</option>
                <option id='Barcelona' value='Barcelona' onclick='javascript:quitarEquipo(1);'>Barcelona</option>
                <option id='Madrid' value='Madrid' onclick='javascript:quitarEquipo(2);'>Madrid</option>
                <option id='Valencia' value='Valencia' onclick='javascript:quitarEquipo(3);'>Valencia</option>
                <option id='Malaga' value='Malaga' onclick='javascript:quitarEquipo(4);'>Malaga</option>
                <option id='Levante' value='Levante' onclick='javascript:quitarEquipo(5);'>Levante</option>
                <option id='Atletico' value='Atletico' onclick='javascript:quitarEquipo(6);'>Atletico</option>
                <option id='Mallorca' value='Mallorca' onclick='javascript:quitarEquipo(7);'>Mallorca</option>
                <option id='Athletic' value='Athletic' onclick='javascript:quitarEquipo(8);'>Athletic</option>
                <option id='Osasuna' value='Osasuna' onclick='javascript:quitarEquipo(9);'>Osasuna</option>
                <option id='Sevilla' value='Sevilla' onclick='javascript:quitarEquipo(10);'>Sevilla</option>
                <option id='Betis' value='Betis' onclick='javascript:quitarEquipo(11);'>Betis</option>
                <option id='Getafe' value='Getafe' onclick='javascript:quitarEquipo(12);'>Getafe</option>
                <option id='Espanyol' value='Espanyol' onclick='javascript:quitarEquipo(13);'>Espanyol</option>
                <option id='RealSociedad' value='RealSociedad' onclick='javascript:quitarEquipo(14);'>Real Sociedad</option>
                <option id='Granada' value='Granada' onclick='javascript:quitarEquipo(15);'>Granada</option>
                <option id='Villareal' value='Villareal' onclick='javascript:quitarEquipo(16);'>Villareal</option>
                <option id='Rayo' value='Rayo' onclick='javascript:quitarEquipo(17);'>Rayo</option>
                <option id='Zaragoza' value='Zaragoza' onclick='javascript:quitarEquipo(18);'>Zaragoza</option>
                <option id='Sporting' value='Sporting' onclick='javascript:quitarEquipo(19);'>Sporting</option>
                <option id='Racing' value='Racing' onclick='javascript:quitarEquipo(20);'>Racing</option>
                </select><br>";
            }
            echo "</th></table><center><input type='button' id='ActMarcadores;' value='Actualizar Marcadores' class='submitAnunciarse'></center></form>";
         ?>
 

y de Javascript tengo muy poco, por no decir casi nada.... Lo único que he estado haciendo pruebas y de la siguiente manera, me borra de la lista pero sólo de la que selecciono, no las del resto...

Código Javascript:

function quitarEquipo(equipo){
    alert(equipo);
    for(var c=0; c<10;c++){
        document.getElementById('selActMarcL').remove(equipo);
    }
    document.getElementById('selActMarcR').remove(equipo);
}
 

[marlanga]

Tu código tendrá un problema grave: Cuando deselecciones un option, los otros selects no se enterarán y no lo añadirán. Asi que hay que guardar los option marcados.

Código HTML:

<html>
    <head>
    <script>
 

Código Javascript:

var equipos=[
        ["Barcelona","Barcelona"],
        ["Madrid","Real Madrid"],
        ["Valencia","Valencia"],
        ["Malaga","Malaga"],
        ["Levante","Levante"],
        ["Atletico","Atletico de Madrid"],
        ["Mallorca","Mallorca"],
        ["Athletic","Athletic de Bilbao"],
        ["Osasuna","Osasuna"],
        ["Sevilla","Sevilla"],
        ["Betis","Betis"],
        ["Getafe","Getafe"],
        ["Espanyol","Espanyol"],
        ["RealSociedad","Real Sociedad"],
        ["Granada","Granada"],
        ["Rayo","Rayo Vallecano"],
        ["Zaragoza","Zaragoza"],
        ["Sporting","Sporting"],
        ["Racing","Racing de Santander"]
    ];
    var elegidos=[];
    Array.prototype.contiene= function(obj,pos) {
        var i = this.length;
        while (i--)
        {
            if (this[i][0] == obj && this[i][1]!=pos)
            {
                return true;
            }
        }
        return false;
    }
    
    function crearOptions(marcado,pos){
        var cadena="<option value='se'>Seleccione Equipo</option>";
        var n = equipos.length;
        for (var i=0;i<n;i++)
        {
            if (elegidos.contiene(equipos[i][0],pos)) continue;
            cadena+="<option "+((marcado==equipos[i][0])?"selected='selected'":"")+" class='"+equipos[i][0]+"' value='"+equipos[i][0]+"'>"+equipos[i][1]+"</option>";
        }
        return cadena;
    }
    function llenarElegidos(){
        elegidos=[];
        for (var i=0;i<10;i++)
        {
            select=document.getElementById("equipo"+i);
            if (select.value!="se")
            {
                elegidos.push([select.value,i]);
            }
        }
    }
    function enlazarChange(){
        for (var i=0;i<10;i++)
        {
            select=document.getElementById("equipo"+i);
            select.onchange=function(){
                llenarElegidos();
                llenarSelects();
            };
        }
    }
    function llenarSelects(){
        var cadena;
        for (var i=0;i<10;i++)
        {
            select=document.getElementById("equipo"+i);
            
            cadena=crearOptions(select.value,i);
            select.innerHTML=cadena;
        }
    }
 
    window.onload=function(){
        elegidos=[];
        enlazarChange();
        llenarSelects();
    }
 

Código HTML:

</script>
    </head>
    <body>
        <select id="equipo0">
        </select><br/>
        <select id="equipo1">
        </select><br/>
        <select id="equipo2">
        </select><br/>
        <select id="equipo3">
        </select><br/>
        <select id="equipo4">
        </select><br/>
        <select id="equipo5">
        </select><br/>
        <select id="equipo6">
        </select><br/>
        <select id="equipo7">
        </select><br/>
        <select id="equipo8">
        </select><br/>
        <select id="equipo9">
        </select><br/>
    </body>
</html>
 

Para verlo en vivo:
http://jsfiddle.net/VUjqb/

[m1991lp]

Muchíssimas gracias compañeroo!! voy a probar :)

Es justo lo que quería, gracias de nuevo !! :D