Javascript – spostare elementi fra liste | Pignatelli.com - programmazione e social media marketing

Home > Javascript > Javascript – spostare elementi fra liste

Javascript – spostare elementi fra liste

14 Ottobre 2008 Nicola Lascia un commento Vai ai commenti

Con questo articolo iniziamo ad esplorare il mondo del javascript, non troppo preso in considerazione negli anni passati ma ultimamente tornato in voga grazie ad Ajax ed al Web 2.0.

In questo articolo spiegheremo come si può spostare elementi da una select ad un’altra senza dover ricaricare la pagina.

Un esempio di utilizzo può essere un elenco di libri da comperare. L’utente sposta nel secondo elenco solo i libri che gli interessano e poi invia la richiesta di acquisto.

Lo scenario che ci troveremo di fronte è il seguente:

L’HTML della pagina di prova è presentato di seguito:

<BODY>
<select id=”primo” name=”primo” multiple style=”width:150px;height:150px”>
<option value=”libro_uno”>primo libro</option>
<option value=”libro_due”>secondo libro</option>
<option value=”libro_tre”>terzo libro</option>
<option value=”libro_quattro”>quarto libro</option>
<option value=”libro_cinque”>quinto libro</option>
</select>

<button name=”invia” onclick=”alert(’elenco inviato’);” />invia</button>
</BODY>

Il codice Javascript utilizzato per effettuare gli spostamenti è il seguente:

function trasferisci(obj) {

var sorgente = ”;
var destinatario = ”;

if (obj.name==”sposta_dx”) {

var sorgente = ‘primo’;
var destinatario = ’secondo’;

} else if (obj.name==”sposta_sx”) {

var sorgente = ’secondo’;
var destinatario = ‘primo’;

}

var oSelect = document.getElementById(sorgente);

for(var i=oSelect.options.length-1; i >= 0; i ) {

if (oSelect.options[i].selected) {

var oOption = new Option(oSelect.options[i].text, oSelect.options[i].value); document.getElementById(destinatario).options.
add(oOption);
oSelect.remove(i);

}

</script>

Come potete vedere dal codice nel momento in cui clicchiamo su uno dei tasti, chiamati rispettivamente sposta_dx e sposta_sx, viene chiamata la funzione javascript trasferisci a cui è passato uno dei due oggetti di cui parlavamo prima.

In un primo momento si analizza il nome dell’oggetto passato, per capire quale delle due select sarà la sorgente e quale la destinataria dei valori da spostare, mentre in un secondo tempo viene eseguito il ciclo for che copia l’elemento, o gli elementi selezionati e li cancella dalla lista originaria.

Se volete vedere in azione l’esempio cliccate su questo url:

http://www.pignatelli.com/demo/js/sposta-elementi-select/index.html