Script javascript: Aggiungere e rimuovere option da una select

   difficoltà:  script script script script script

Demo
Download
Script simili
4/9/2007


Con questo script vedremo come aggiungere in modo dinamico voci da un menù a tendina (select) ad un altro. Per questo esempio avremo una select piena e da questa sarà possibile aggiungere option a un'altra select vuota. In seguito potremo eliminare singole voci dalla select o svuotarla del tutto.

Vediamo subito l'htm della pagina iniziale:

<select name="listacompleta" id="listacompleta">
<option value="1">voce 1</option>
<option value="2">voce 2</option>
<option value="3">voce 3</option>
<option value="4">voce 4</option>
<option value="5">voce 5</option>
</select>

<input type="button" value="Aggiungi" onclick="aggiungivoce()">

<select name="listapersonale" id="listapersonale">
</select>

<input type="button" value="Rimuovi" onclick="rimuovivoce()">

<input type="button" value="Svuota" onclick="svuota()">

Bisogna ora creare le funzioni aggiungivoce() per aggiungere le option alla select, la funzione rimuovivoce() per rimuovere voci dalla select e la funzione svuota() per svuotare la select.

Partiamo con la funzione aggiungivoce():
function aggiungivoce(){
num_option=document.getElementById('listapersonale').options.length;
indice_selezionato = document.getElementById('listacompleta').selectedIndex;
if(indice_selezionato>=0){
value_selezionato = document.getElementById('listacompleta').options[indice_selezionato].value;
testo_selezionato = document.getElementById('listacompleta').options[indice_selezionato].innerHTML;
duplicato=0;
for(a=0;a<num_option;a++){
if(document.getElementById('listapersonale').options[a].value==value_selezionato){
duplicato=1;
}
}
if(duplicato==0){
document.getElementById('listapersonale').options[num_option]=new Option('',escape(value_selezionato),false,false);
document.getElementById('listapersonale').options[num_option].innerHTML = testo_selezionato;
}
}
}

La prima cosa da fare è contare il numero delle option della select di destinazione listapersonale (num_option) e ricavare l'indice dell'opzione selezionata nella listacompleta (indice_selezionato).
Se l'indice_selezionato è maggiore o uguale a zero(gli indici partono da 0) allora vuol dire che una voce della select è selezionata e va quindi inserita nella listapersonale. Preleviamo quindi il valore della voce selezionata (value_selezionato) e il testo visualizzato corrispondente (testo_selezionato).
Controllo in seguito se il valore selezionato non sia già presente nella select da riempire. Se non è un valore duplicato creo una nuova option accodandola alla select listapersonale.

Se vogliamo invece rimuovere l'elemento selezionato nella select listapersonale useremo la funzione rimuovivoce():
function rimuovivoce(){
indice_selezionato = document.getElementById('listapersonale').selectedIndex;
if(indice_selezionato>=0){
document.getElementById('listapersonale').options[indice_selezionato]=null;
}
}

Per prima cosa bisogna ricavare l'indice dell'option selezionata nella listapersonale (indice_selezionato). Se una voce risulta selezionata si darà ad essa il valore null, eliminandola quindi dalla lista.

Con la funzione svuota() invece elimineremo tutto il contenuto della select listapersonale:
function svuota(){
num_option=document.getElementById('listapersonale').options.length;
for(a=num_option;a>=0;a--){
document.getElementById('listapersonale').options[a]=null;
}
}

Bisogna quindi ricavare il numero delle option della select di destinazione listapersonale (num_option) e scorrere tutte le option eliminandole una ad una.

Ecco infine lo script completo:
<html>
<script>
function aggiungivoce(){
num_option=document.getElementById('listapersonale').options.length;
indice_selezionato = document.getElementById('listacompleta').selectedIndex;
if(indice_selezionato>=0){
value_selezionato = document.getElementById('listacompleta').options[indice_selezionato].value;
testo_selezionato = document.getElementById('listacompleta').options[indice_selezionato].innerHTML;
duplicato=0;
for(a=0;a<num_option;a++){
if(document.getElementById('listapersonale').options[a].value==value_selezionato){
duplicato=1;
}
}
if(duplicato==0){
document.getElementById('listapersonale').options[num_option]=new Option('',escape(value_selezionato),false,false);
document.getElementById('listapersonale').options[num_option].innerHTML = testo_selezionato;
}
}
}
function rimuovivoce(){
indice_selezionato = document.getElementById('listapersonale').selectedIndex;
if(indice_selezionato>=0){
document.getElementById('listapersonale').options[indice_selezionato]=null;
}
}

function svuota(){
num_option=document.getElementById('listapersonale').options.length;
for(a=num_option;a>=0;a--){
document.getElementById('listapersonale').options[a]=null;
}
}
</script>

<body>
<select name="listacompleta" id="listacompleta">
<option value="1">voce 1</option>
<option value="2">voce 2</option>
<option value="3">voce 3</option>
<option value="4">voce 4</option>
<option value="5">voce 5</option>
</select>

<input type="button" value="Aggiungi" onclick="aggiungivoce()">

<select name="listapersonale" id="listapersonale">
</select>

<input type="button" value="Rimuovi" onclick="rimuovivoce()">

<input type="button" value="Svuota" onclick="svuota()">
</body>
</html>





Commenti


  Victor

16/11/2007 10:11:54

Funziona molto bene grazie

  Donato

4/6/2009 11:12:15

ciao, ho visto che lo script è di un po di tempo fa, però l'ho trovato molto utile. non ho capito una cosa però,

in:
new Option('',escape(value_selezionato),false,false);
il primo parametro - "
a che serve?

grazie mille

  Fabio

4/6/2009 11:23:26

se nn sbaglio è l'etichetta della option. Io l'ho inserita dopo..non ricordo se c'era un motivo particolare

  teo

9/9/2009 9:32:19

Bello, grazie!

  Fanto

28/3/2011 0:47:11

Molto utile, grazie

  Daniele

11/8/2014 18:08:10

"Se questo script ti grave; stato utile e ti ho fatto risparmiare tempo e denaro..."

GRAVE???

:-)



Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.