Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] ocultar o remover option select multiple

Estas en el tema de ocultar o remover option select multiple en el foro de Javascript en Foros del Web. hola que tal, Tengo 2 select multiple, como podria ocultar o remover un option o varios del primer select si en el segundo ya existen ...
  #1 (permalink)  
Antiguo 10/06/2014, 02:23
Avatar de totti026  
Fecha de Ingreso: junio-2011
Mensajes: 150
Antigüedad: 12 años, 9 meses
Puntos: 4
Pregunta ocultar o remover option select multiple

hola que tal,
Tengo 2 select multiple, como podria ocultar o remover un option o varios del primer select si en el segundo ya existen esos elementos...
  #2 (permalink)  
Antiguo 10/06/2014, 06:38
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años
Puntos: 292
Respuesta: ocultar o remover option select multiple

Hola,

Ocultar un OPTION no se puede

Asi que aun puedes "remover" el elemento o "deshabilitarlo" y te hice una funcion que segun un parametro hace una cosa o la otra

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

Última edición por Italico76; 10/06/2014 a las 07:36
  #3 (permalink)  
Antiguo 10/06/2014, 09:10
Avatar de totti026  
Fecha de Ingreso: junio-2011
Mensajes: 150
Antigüedad: 12 años, 9 meses
Puntos: 4
Respuesta: ocultar o remover option select multiple

Perfecto! muchas gracias...
y para cargar la función al abrir la pagina seria con body onload="limpiarSelect1(modo)"
pero quisiera que se eliminaran automaticamente todos los option..

Gracias de antemano por tu tiempo
  #4 (permalink)  
Antiguo 10/06/2014, 10:41
Avatar de totti026  
Fecha de Ingreso: junio-2011
Mensajes: 150
Antigüedad: 12 años, 9 meses
Puntos: 4
Respuesta: ocultar o remover option select multiple

pues ocupe onload al cargar la pagina, y como quiero eliminarlos use delete...
Código HTML:
Ver original
  1. <body onload="limpiarSelect1('delete')">
solo que el primer option si lo hace correctamente pero si hay mas 2 en adelante me quita el primero y los demas no...

y asi sucesivamente..
  #5 (permalink)  
Antiguo 10/06/2014, 10:52
Avatar de totti026  
Fecha de Ingreso: junio-2011
Mensajes: 150
Antigüedad: 12 años, 9 meses
Puntos: 4
Respuesta: ocultar o remover option select multiple

ok lo resolvi añadiendo ++ en esta linea
sel1.removeChild(conj1[i++]);
  #6 (permalink)  
Antiguo 10/06/2014, 11:27
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años
Puntos: 292
Respuesta: ocultar o remover option select multiple

Dame un ejemplo con datos concretos en lo options (pega tu HTML) para poder ver donde esta la falla.

Aca encontre tambien que falla.... pero si tienes mas ejemplos, mejor... hoy lo arreglo:

Código Javascript:
Ver original
  1. <select name="elementos1" multiple >       
  2.         <option value="tizas" >tizas</option">     
  3.         <option value="zapatos">zapatos</option">      
  4.         <option value="pizarron" >pizarron</option">    
  5.     </select>
  6.     <p/>
  7.    
  8.     Select 2<br/>
  9.     <select name="elementos2" multiple >       
  10.         <option value="marcadores" >marcadores</option">    
  11.         <option value="mochila">mochila</option">      
  12.         <option value="utiles" >utiles</option">
  13.         <option value="pizarron" >pizarron</option">    
  14.         <option value="tizas" >tizas</option">  
  15.         <option value="zapatos">zapatos</option">  
  16.     </select>
__________________
Salu2!
  #7 (permalink)  
Antiguo 10/06/2014, 11:31
Avatar de totti026  
Fecha de Ingreso: junio-2011
Mensajes: 150
Antigüedad: 12 años, 9 meses
Puntos: 4
Respuesta: ocultar o remover option select multiple

mira este ejemplo...
existen los mismos input en los 2 select.. deberia el primero estar vacio...
Código HTML:
Ver original
  1. <!doctype html>
  2. <html lang="es">
  3.     <meta charset="UTF-8">
  4.     <title>select</title>
  5.    
  6. </head>
  7. <body onload="limpiarSelect1('delete')">
  8.     select 1
  9.     <select name="uno" id="uno" multiple="multiple">
  10.         <option value="1">mochila</option>
  11.         <option value="2">zapatos</option>
  12.         <option value="3">utiles</option>
  13.        
  14.     </select>
  15.     <br>
  16.     select 2
  17.     <select name="dos" id="dos" multiple="multiple">
  18.         <option value="1">mochila</option>
  19.         <option value="2">zapatos</option>
  20.         <option value="3">utiles</option>
  21.        
  22.     </select>
  23.  
  24.     /*
  25.         @param modo 'delete' ó 'disable'
  26.     */
  27.     function limpiarSelect1(modo)
  28.     {
  29.         modo = modo || 'delete';
  30.        
  31.         if (modo!='delete' && modo!='disable')
  32.            throw new Error('Modo incorrecto');
  33.        
  34.         sel1 = document.getElementsByName('uno')[0];
  35.         sel2 = document.getElementsByName('dos')[0];
  36.    
  37.         conj1 = sel1.getElementsByTagName('option');;
  38.         conj2 = sel2.getElementsByTagName('option');;
  39.        
  40.         // recorro el primer select
  41.         for (var i=0; i<conj1.length;i++)
  42.        {  
  43.            // recorro el segundo select    
  44.            for (var j=0; j<conj2.length;j++)
  45.        
  46.            if (conj1[i].value==conj2[j].value)
  47.            {
  48.                console.log(modo+' para '+conj1[i].value);
  49.                if (modo=='delete')
  50.                {
  51.                    sel1.removeChild(conj1[i]);
  52.                    i--;  // toca re-ajustar indice luego de matanza :)
  53.                }else
  54.                    conj1[i].disabled='disabled'
  55.            }  
  56.        }  
  57.    }  
  58.    
  59. </body>
  60. </html>
  #8 (permalink)  
Antiguo 10/06/2014, 11:33
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años
Puntos: 292
Respuesta: ocultar o remover option select multiple

Listo... salgo a llevar a mi hijo al jardin... vuelvo y lo resolvemos
__________________
Salu2!
  #9 (permalink)  
Antiguo 10/06/2014, 11:47
Avatar de totti026  
Fecha de Ingreso: junio-2011
Mensajes: 150
Antigüedad: 12 años, 9 meses
Puntos: 4
Respuesta: ocultar o remover option select multiple

Perfecto! gracias
  #10 (permalink)  
Antiguo 10/06/2014, 12:30
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años
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!
  #11 (permalink)  
Antiguo 10/06/2014, 15:46
Avatar de totti026  
Fecha de Ingreso: junio-2011
Mensajes: 150
Antigüedad: 12 años, 9 meses
Puntos: 4
Respuesta: ocultar o remover option select multiple

Perfecto Italico76 muchas gracias
tema solucionado!

Etiquetas: option, remover, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:50.