Remover elementos de un Listbox con JQuery

chubse · #1 (**permalink**) 24/09/2013, 15:35

Que tal amigos del foro, antes que nada les doy las gracias por su gran ayuda. Les explico mi problema:
tengo 2 Listbox que funcionan cuando doy doble click en la lista del box1Group me añade los elementos al box2Group y si doy doble click en la lista añadida del box2Group me remueve los elementos del box2Group, ¿cómo podría hacer para que en vez de tener que darle doble click en los elementos del box2Group para removerlos los pueda seleccionar del mismo box1Group? Es decir que con un sólo click en el box1Group me añada los elementos y con un doble click en el mismo box1Group me los remueva del box2Group.

Gracias
Saludos

index.php

Código HTML:

Ver original<head>
<script src="js/jquery.contextmenu.r2.js" type="text/javascript"></script> 
</head>
 
<body>
<form name="estados" id="estados" action="filtro_edo_login.php" method="POST" onsubmit="selectAllOptions('select_2'); return false;">
                    <div id="box1Group">
                        <select name="view[]" id="view" multiple="multiple" style="height:400px;width:400px;">
                        
                        <?php
            
                            $consult_edo="SELECT id_estado, estado_dsc FROM cat_estado";
                            
                            $result_edo=mysql_query ($consult_edo,$conexion);   
                                                                    
                                while ($fila=mysql_fetch_array($result_edo)){  
                                
                                        echo '<option value="'.$fila["id_estado"].' "';
                                                if($_POST["view"]==$fila["id_estado"]) echo " selected"; 
                                        echo '>'.$fila["estado_dsc"].'</option>';   
                        }
                            
                                    
                        ?>
                        </select><br/>
 
                    </div>
                
                    <div id="box2Group">
                        <select name="view[]" multiple="multiple" style="height:400px;width:400px;" id="select_2"></select><br />
        
        </div>
 
        </form>
</body>

dlbScriptCrossBrowser.js

Código Javascript:

Ver original$(function() {
    var biggest = 0;
    $("button").each(function(i) {
        if ($(this).width() > biggest) { biggest = $(this).width(); }
    });
    biggest += 5;
$("#box1Group select[name='view[]']").click(function() {
        MoveSelected('box1Group', 'box2Group');
    });
$("#box2Group select[name='view[]']").dblclick(function() {
        RemoveSelected('box2Group', 'box1Group');
    });
});
 
function MoveSelected(fromGroupID, toGroupID) {
    $("#" + fromGroupID + " select[name='view[]'] option:selected:not([class=copiedOption])").clone().appendTo("#" + toGroupID + " select[name='view[]']").end().end().addClass('copiedOption').removeAttr('selected');
    Filter(toGroupID, $("#" + toGroupID + " input[name='filter']").val());
    UpdateLabel(fromGroupID);
 
function RemoveSelected(removeFromGroupID, otherGroupID) {
    $("#" + otherGroupID + " select[name='view[]'] option.copiedOption").add("#" + otherGroupID + " select[name='storage'] option.copiedOption").remove();
    $("#" + removeFromGroupID + " select[name='view[]'] option:selected").removeAttr('selected').appendTo("#" + otherGroupID + " select[name='view[]']");
    $("#" + removeFromGroupID + " select[name='view[]'] option").add("#" + removeFromGroupID + " select[name='storage'] option").clone().addClass('copiedOption').appendTo("#" + otherGroupID + " select[name='view[]']");
    Filter(otherGroupID, $("#" + otherGroupID + " input[name='filter']").val());
    UpdateLabel(removeFromGroupID);
}