Ver Mensaje Individual
  #10 (permalink)  
Antiguo 10/06/2014, 12:30
Avatar de Italico76
Italico76
 
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años, 8 meses
Puntos: 292
Respuesta: ocultar o remover option select multiple

Listo... el problema era en el modo 'borrar' y es que no es seguro modificar la cantidad de elementos de un arreglo desde dentro de un bucle y mantener coherencia luego con el indice.

La solucion fue crear un "arreglo de elementos a borrar" y procesarlos al final:

Código Javascript:
Ver original
  1. <style>
  2.  select{
  3.  height:10em;
  4.  width:7em;
  5.  }
  6. </style>
  7.  
  8.  
  9. <form action="" method="">
  10.     Select 1<br/>
  11.  
  12.     <select name="elementos1" multiple >       
  13.         <option value="tizas" >tizas</option">     
  14.         <option value="zapatos">zapatos</option">      
  15.         <option value="pizarron" >pizarron</option">    
  16.     </select>
  17.     <p/>
  18.    
  19.     Select 2<br/>
  20.     <select name="elementos2" multiple >       
  21.         <option value="marcadores" >marcadores</option">    
  22.         <option value="mochila">mochila</option">      
  23.         <option value="utiles" >utiles</option">
  24.         <option value="pizarron" >pizarron</option">    
  25.         <option value="tizas" >tizas</option">  
  26.         <option value="zapatos">zapatos</option">  
  27.     </select>
  28. </form>
  29. <p/>
  30.  
  31. <a href="javascript:limpiarSelect1('disable');">Deshabilitar options</a><br/>
  32. <a href="javascript:limpiarSelect1('delete');">Borrar options</a>
  33.    
  34. <script>
  35.     /*
  36.         @param modo 'delete' ó 'disable'
  37.     */
  38.     function limpiarSelect1(modo)
  39.     {
  40.         modo = modo || 'delete';
  41.        
  42.         if (modo!='delete' && modo!='disable')
  43.             throw new Error('Modo incorrecto');
  44.        
  45.         sel1 = document.getElementsByName('elementos1')[0];
  46.         sel2 = document.getElementsByName('elementos2')[0];
  47.    
  48.         conj1 = sel1.getElementsByTagName('option');;
  49.         conj2 = sel2.getElementsByTagName('option');;
  50.        
  51.         var borrar = new Array;
  52.        
  53.         // recorro el primer select
  54.         for (var i=0; i<conj1.length;i++)
  55.         {  
  56.             // recorro el segundo select   
  57.             for (var j=0; j<conj2.length;j++)  
  58.        
  59.             if (conj1[i].value==conj2[j].value)
  60.             {              
  61.                 console.log(modo+' para '+conj1[i].value);
  62.                 if (modo=='delete')
  63.                 {
  64.                     borrar.push(conj1[i]);                                 
  65.                 }else
  66.                     conj1[i].disabled='disabled'
  67.                    
  68.                
  69.             }  
  70.         }
  71.  
  72.         if (modo=='delete' && borrar.length!=0)    
  73.             for (var i=0; i<borrar.length;i++)
  74.                 sel1.removeChild(borrar[i]);   
  75.        
  76.     }  
  77.    
  78. </script>
__________________
Salu2!