Dall'archivio script

Usare jQuery per scambiare elementi tra due ListBox

Marco De Sanctis

di Marco De Sanctis, in jQuery, ASP.NET 2.0, ASP.NET 3.5,

Archiviato in: , , ,

Il punto di forza di jQuery è quello di rendere estremamente semplice e veloce l'implementazione via Javascript di funzionalità tipiche di una pagina web. Una di queste è sicuramente quella di scambiare, tramite due pulsanti, gli elementi tra due liste.



L'HTML è costituito da due SELECT e due button arrangiati all'interno di alcuni div per ottenere il layout della figura precedente:

Definizione dell'HTML
<div style="float: left; margin:2px"> 
    <select id="source" size="10" style="width:80px" multiple="multiple"> 
        <option value="1">Item 1</option> 
        <option value="2">Item 2</option> 
        .... 
    </select> 
</div> 
<div style="float: left; margin:2px"> 
    <input type="button" id="moveRight" value="->" /> 
 
    <input type="button" id="moveLeft" value="<-" /> 
</div> 
<div style="float: left; margin:2px"> 
    <select id="target" size="10" style="width:80px" multiple="multiple"> 
    </select> 
</div> 
<div style="clear:left"></div>

A questo punto non bisogna far altro che gestire, tramite jQuery, gli eventi click (rigorosamente lato client) su entrambi i pulsanti:

Handler degli eventi di click dei pulsanti
<script type="text/javascript"> 
    $(function() { 
        $('#moveRight').click(function() { 
            $('#source option:selected').appendTo('#target'); 
        }) 
        $('#moveLeft').click(function() { 
            $('#target option:selected').appendTo('#source'); 
        }); 
    }); 
</script>

La logica è molto semplice: tramite

$('#moveRight').click(function() { ... });

viene individuato il pulsante con id "moveRight", assegnando come gestore per il suo evento click il codice inserito nella function anonima successiva, che nel nostro caso specifico è

$('#source option:selected').appendTo('#target');

Questo statement non fa altro che individuare, all'interno della SELECT di nome "source", gli elementi selezionati, per poi aggiungerli a quella di nome "target". Un codice assolutamente analogo implementa la logica necessaria per supportare lo spostamento nel verso opposto.