[SOLUCIONADO] ocultar o remover option select multiple

totti026 · #1 (**permalink**) 10/06/2014, 02:23

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

Italico76 · #2 (**permalink**) 10/06/2014, 06:38

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<form action="" method="">
    Select 1<br/>
 
    <select name="elementos1" multiple >                
        <option value="zapatos">zapatos</option"> 
        <option value="utiles" >utiles</option"> 
        <option value="pizarron" >pizarron</option">    
    </select> 
    <p/>
    
    Select 2<br/>
    <select name="elementos2" multiple >        
        <option value="mochila">mochila</option">       
        <option value="utiles" >utiles</option"> 
        <option value="pizarron" >pizarron</option">    
    </select> 
</form>
<p/>
 
<a href="javascript:limpiarSelect1('disable');">Deshabilitar options</a><br/>
<a href="javascript:limpiarSelect1('delete');">Borrar options</a>
    
<script>
    /*
        @param modo 'delete' ó 'disable'
    */
    function limpiarSelect1(modo)
    {
        modo = modo || 'delete';
        
        if (modo!='delete' && modo!='disable')
            throw new Error('Modo incorrecto');
        
        sel1 = document.getElementsByName('elementos1')[0];
        sel2 = document.getElementsByName('elementos2')[0];
    
        conj1 = sel1.getElementsByTagName('option');;
        conj2 = sel2.getElementsByTagName('option');;
        
        // recorro el primer select 
        for (var i=0; i<conj1.length;i++)
        {   
            // recorro el segundo select    
            for (var j=0; j<conj2.length;j++)   
        
            if (conj1[i].value==conj2[j].value)
            {
                console.log(modo+' para '+conj1[i].value);
                if (modo=='delete')
                {
                    sel1.removeChild(conj1[i]);             
                    i--;  // toca re-ajustar indice luego de matanza :)
                }else
                    conj1[i].disabled='disabled'
            }   
        }   
    }   
    
</script>

totti026 · #3 (**permalink**) 10/06/2014, 09:10

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

totti026 · #4 (**permalink**) 10/06/2014, 10:41

pues ocupe onload al cargar la pagina, y como quiero eliminarlos use delete...

Código HTML:

Ver original<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..

totti026 · #5 (**permalink**) 10/06/2014, 10:52

ok lo resolvi añadiendo ++ en esta linea
sel1.removeChild(conj1[i++]);

Italico76 · #6 (**permalink**) 10/06/2014, 11:27

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<select name="elementos1" multiple >        
        <option value="tizas" >tizas</option">      
        <option value="zapatos">zapatos</option">       
        <option value="pizarron" >pizarron</option">    
    </select> 
    <p/>
    
    Select 2<br/>
    <select name="elementos2" multiple >        
        <option value="marcadores" >marcadores</option">    
        <option value="mochila">mochila</option">       
        <option value="utiles" >utiles</option"> 
        <option value="pizarron" >pizarron</option">    
        <option value="tizas" >tizas</option">  
        <option value="zapatos">zapatos</option">   
    </select>

totti026 · #7 (**permalink**) 10/06/2014, 11:31

mira este ejemplo...
existen los mismos input en los 2 select.. deberia el primero estar vacio...

Código HTML:

Ver original<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>select</title>
    
</head>
<body onload="limpiarSelect1('delete')">
    select 1
    <select name="uno" id="uno" multiple="multiple">
        <option value="1">mochila</option>
        <option value="2">zapatos</option>
        <option value="3">utiles</option>
        
    </select>
    <br>
    select 2
    <select name="dos" id="dos" multiple="multiple">
        <option value="1">mochila</option>
        <option value="2">zapatos</option>
        <option value="3">utiles</option>
        
    </select>
 
<script>
    /*
        @param modo 'delete' ó 'disable'
    */
    function limpiarSelect1(modo)
    {
        modo = modo || 'delete';
        
        if (modo!='delete' && modo!='disable')
            throw new Error('Modo incorrecto');
        
        sel1 = document.getElementsByName('uno')[0];
        sel2 = document.getElementsByName('dos')[0];
    
        conj1 = sel1.getElementsByTagName('option');;
        conj2 = sel2.getElementsByTagName('option');;
        
        // recorro el primer select 
        for (var i=0; i<conj1.length;i++)
        {   
            // recorro el segundo select    
            for (var j=0; j<conj2.length;j++)
        
            if (conj1[i].value==conj2[j].value)
            {
                console.log(modo+' para '+conj1[i].value);
                if (modo=='delete')
                {
                    sel1.removeChild(conj1[i]);
                    i--;  // toca re-ajustar indice luego de matanza :)
                }else
                    conj1[i].disabled='disabled'
            }   
        }   
    }   
    
</script>
</body>
</html>

Italico76 · #8 (**permalink**) 10/06/2014, 11:33

Listo... salgo a llevar a mi hijo al jardin... vuelvo y lo resolvemos

totti026 · #9 (**permalink**) 10/06/2014, 11:47

Perfecto! gracias

Italico76 · #10 (**permalink**) 10/06/2014, 12:30

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<style>
 select{
 height:10em;
 width:7em;
 }
</style>
 
 
<form action="" method="">
    Select 1<br/>
 
    <select name="elementos1" multiple >        
        <option value="tizas" >tizas</option">      
        <option value="zapatos">zapatos</option">       
        <option value="pizarron" >pizarron</option">    
    </select> 
    <p/>
    
    Select 2<br/>
    <select name="elementos2" multiple >        
        <option value="marcadores" >marcadores</option">    
        <option value="mochila">mochila</option">       
        <option value="utiles" >utiles</option"> 
        <option value="pizarron" >pizarron</option">    
        <option value="tizas" >tizas</option">  
        <option value="zapatos">zapatos</option">   
    </select> 
</form>
<p/>
 
<a href="javascript:limpiarSelect1('disable');">Deshabilitar options</a><br/>
<a href="javascript:limpiarSelect1('delete');">Borrar options</a>
    
<script>
    /*
        @param modo 'delete' ó 'disable'
    */
    function limpiarSelect1(modo)
    {
        modo = modo || 'delete';
        
        if (modo!='delete' && modo!='disable')
            throw new Error('Modo incorrecto');
        
        sel1 = document.getElementsByName('elementos1')[0];
        sel2 = document.getElementsByName('elementos2')[0];
    
        conj1 = sel1.getElementsByTagName('option');;
        conj2 = sel2.getElementsByTagName('option');;
        
        var borrar = new Array;
        
        // recorro el primer select 
        for (var i=0; i<conj1.length;i++)
        {   
            // recorro el segundo select    
            for (var j=0; j<conj2.length;j++)   
        
            if (conj1[i].value==conj2[j].value)
            {               
                console.log(modo+' para '+conj1[i].value);
                if (modo=='delete')
                {
                    borrar.push(conj1[i]);                                  
                }else
                    conj1[i].disabled='disabled'
                    
                
            }   
        }
 
        if (modo=='delete' && borrar.length!=0)     
            for (var i=0; i<borrar.length;i++)
                sel1.removeChild(borrar[i]);    
        
    }   
    
</script>

totti026 · #11 (**permalink**) 10/06/2014, 15:46

Perfecto Italico76 muchas gracias
tema solucionado!