Script javascript: Aggiungere e rimuovere option da una select
difficoltà:
Download
Script simili4/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>
Social:
Donazione:
Se questo script ti è stato utile e ti ho fatto risparmiare tempo e denaro fai una
qualsiasi cifra è ben accetta! 1€, 3€, 5€ ,10€, 50€ ;-) fai te!
Permalink:
Tag:
Script Simili:
Script ajax: Aggiungere e rimuovere elementi ordinabili con scriptaculous
Script php: Funzione per creare select con data
Script javascript: Select a larghezza fissa in explorer
Script php: Aggiungere un logo watermark ad una immagine
Script javascript: Aggiungere elementi a una pagina web
Script php: Funzione per creare select con data
Script javascript: Select a larghezza fissa in explorer
Script php: Aggiungere un logo watermark ad una immagine
Script javascript: Aggiungere elementi a una pagina web
Permalink:
Link utili:
Commenti
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
Daniele
11/8/2014 18:08:10
"Se questo script ti grave; stato utile e ti ho fatto risparmiare tempo e denaro..."
GRAVE???
:-)
Feed Rss
16/11/2007 10:11:54
Funziona molto bene grazie