Foros del Web - Ver Mensaje Individual

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>