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:
<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="->" /><br /> <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:
<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.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Load test di ASP.NET Core con k6
Implementare il throttling in ASP.NET Core
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Short-circuiting della Pipeline in ASP.NET Core
Generare file per il download da Blazor WebAssembly
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Eseguire operazioni con timeout in React