MICHELEPISANI.IT
 

Allestire dinamicamente select, dropdown o combobox

Popolare una 'select' con elementi inseriti a runtime in Javascript puro

popolare una select box inserendo elementi a runtime in javascript puro
Aprile 07
07:182015

Con Javascript è possibile popolare una select (combobox) dinamicamente e a runtime. Il vantaggio è che non necessariamente gli elementi che compongono le select dovranno essere conosciuti a priori e quindi presenti hardcode nella pagina o prelevati da una tabella di un database. Un caso pratico potrebbe essere quello in cui un utente aggiunge una voce non prevista in un menù, come ad esempio un paese (magari salavata successivamente in Ajax per essere poi sottoposta alla revisione da parte del gestore per un eventuale approvazione) che possa permettergli in questo modo di procedere con l'iscrizione o le operazioni successive, o ancora più semplice recuperare direttamente lato utente, in questo caso da array definiti, gli elementi con cui i campi dovranno essere riempiti in base a scelte precedenti (ad esempio se riempendo un form seleziono un paese, mi appriranno in un'altra select, le città solo di quel determinato paese prelevate dall'opportuno array. Ad oggi è più performante utilizzate la tecnologia Ajax per sopperire a simili esigenze, ma questi sono solo esempi banali da cui poter trarre spunto per sfruttare le potenzialità del Javascript puro).

Di seguito riporto due esempi di codice funzionante dove relativamente nel primo caso troviamo una select che viene popolata recuperando gli elementi da un array (usato così com'è esso viene popolato al caricamento della pagina):

HTML del primo esempio:

<select id="esempio_select_1"></select>


Javascript del primo esempio:

var array_paesi = ['Belgio','Francia','Inghilterra','Italia','Olanda','Spagna'],
esempio_select_1 = document.getElementById('esempio_select_1');

for( paesi in array_paesi ) {
    esempio_select_1.add( new Option( array_paesi[paesi] ) ); 
};


nel secondo invece la select viene riempita con elementi decisi dall'utente:

HTML del secondo esempio:

<input type="text" id="esempio_text_1" />
<input type="button" id="btn_aggiungi" value="aggiungi alla lista" />
<select id="esempio_select_2"></select>


Javascript del secondo esempio:

document.getElementById('btn_aggiungi').onclick = function() {
    esempio_select_2 = document.getElementById('esempio_select_2');
    country_val = document.getElementById('esempio_text_1').value;
    if (country_val != '') {
        esempio_select_2.add(new Option(country_val));
        document.getElementById('esempio_text_1').value='';
    } else {
        alert('Non hai inserito nessun valore.');
    }
}


Per testare direttamente i due script potete avvalervi del JSFiddle che ho creato e che trovate di seguito selezionando il tab "Result":



Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Grazie Paolo,
spero possa tornarti utile per i tuoi scopi.

Paolo

salve,mi interessa il progetto sensore gas ,per applicazioni in agricoltura.Vedremo gli …

Michele Pisani

Ciao Rossana,
strano problema, una domanda: continui a visualizzare entrambe le pagine o una …

Rossana

Ciao Michele, il mio problema è che Facebook non mi risponde. Mi è successo tre volte: faccio …