Tema: Modificar listas, selects al seleccionar opcion
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 28/05/2012, 04:21
Avatar de marlanga
marlanga
 
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 10 meses
Puntos: 206
Respuesta: Modificar listas, selects al seleccionar opcion
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: 
Ver original
  1. <html>
  2.     <head>
  3.     <script>
Código Javascript: 
Ver original
  1. var equipos=[
  2.         ["Barcelona","Barcelona"],
  3.         ["Madrid","Real Madrid"],
  4.         ["Valencia","Valencia"],
  5.         ["Malaga","Malaga"],
  6.         ["Levante","Levante"],
  7.         ["Atletico","Atletico de Madrid"],
  8.         ["Mallorca","Mallorca"],
  9.         ["Athletic","Athletic de Bilbao"],
  10.         ["Osasuna","Osasuna"],
  11.         ["Sevilla","Sevilla"],
  12.         ["Betis","Betis"],
  13.         ["Getafe","Getafe"],
  14.         ["Espanyol","Espanyol"],
  15.         ["RealSociedad","Real Sociedad"],
  16.         ["Granada","Granada"],
  17.         ["Rayo","Rayo Vallecano"],
  18.         ["Zaragoza","Zaragoza"],
  19.         ["Sporting","Sporting"],
  20.         ["Racing","Racing de Santander"]
  21.     ];
  22.     var elegidos=[];
  23.     Array.prototype.contiene= function(obj,pos) {
  24.         var i = this.length;
  25.         while (i--)
  26.         {
  27.             if (this[i][0] == obj && this[i][1]!=pos)
  28.             {
  29.                 return true;
  30.             }
  31.         }
  32.         return false;
  33.     }
  34.     
  35.     function crearOptions(marcado,pos){
  36.         var cadena="<option value='se'>Seleccione Equipo</option>";
  37.         var n = equipos.length;
  38.         for (var i=0;i<n;i++)
  39.         {
  40.             if (elegidos.contiene(equipos[i][0],pos)) continue;
  41.             cadena+="<option "+((marcado==equipos[i][0])?"selected='selected'":"")+" class='"+equipos[i][0]+"' value='"+equipos[i][0]+"'>"+equipos[i][1]+"</option>";
  42.         }
  43.         return cadena;
  44.     }
  45.     function llenarElegidos(){
  46.         elegidos=[];
  47.         for (var i=0;i<10;i++)
  48.         {
  49.             select=document.getElementById("equipo"+i);
  50.             if (select.value!="se")
  51.             {
  52.                 elegidos.push([select.value,i]);
  53.             }
  54.         }
  55.     }
  56.     function enlazarChange(){
  57.         for (var i=0;i<10;i++)
  58.         {
  59.             select=document.getElementById("equipo"+i);
  60.             select.onchange=function(){
  61.                 llenarElegidos();
  62.                 llenarSelects();
  63.             };
  64.         }
  65.     }
  66.     function llenarSelects(){
  67.         var cadena;
  68.         for (var i=0;i<10;i++)
  69.         {
  70.             select=document.getElementById("equipo"+i);
  71.             
  72.             cadena=crearOptions(select.value,i);
  73.             select.innerHTML=cadena;
  74.         }
  75.     }
  76.  
  77.     window.onload=function(){
  78.         elegidos=[];
  79.         enlazarChange();
  80.         llenarSelects();
  81.     }
Código HTML: 
Ver original
  1. </script>
  2.     </head>
  3.     <body>
  4.         <select id="equipo0">
  5.         </select><br/>
  6.         <select id="equipo1">
  7.         </select><br/>
  8.         <select id="equipo2">
  9.         </select><br/>
  10.         <select id="equipo3">
  11.         </select><br/>
  12.         <select id="equipo4">
  13.         </select><br/>
  14.         <select id="equipo5">
  15.         </select><br/>
  16.         <select id="equipo6">
  17.         </select><br/>
  18.         <select id="equipo7">
  19.         </select><br/>
  20.         <select id="equipo8">
  21.         </select><br/>
  22.         <select id="equipo9">
  23.         </select><br/>
  24.     </body>
  25. </html>

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