Pignatelli.com - programmazione e social media marketing » Javascript http://www.pignatelli.com Notizie e informazioni su programmazione e social media marketing Sun, 03 Oct 2010 15:04:11 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Javascript – spostare elementi fra liste http://www.pignatelli.com/2008/10/14/javascript-spostare-elementi-fra-liste/ http://www.pignatelli.com/2008/10/14/javascript-spostare-elementi-fra-liste/#comments Tue, 14 Oct 2008 15:37:41 +0000 Nicola http://www.pignatelli.com/?p=328
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 [...]]]>

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:

preview dell'esempio nel browser

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=”sposta_dx” onclick=”trasferisci(this)” >&gt;&gt;</button>
<button name=”sposta_sx” onclick=”trasferisci(this)” >&lt;&lt;</button>

<select id=”secondo” name=”secondo” multiple style=”width:150px;height:150px”></select>

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

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

<script type=”text/javascript”>

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

]]> http://www.pignatelli.com/2008/10/14/javascript-spostare-elementi-fra-liste/feed/ 0