
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":
Il problema mio è più complesso. L'ho risolto con VbScript, ma con JavaScript mi sono impantanato(mia ignoranza).
Ho un file txt. in esso archivio righe composte di 6 dati separati da ; e terminano con *.Le raccolgo in un Array.
Su un semplice select devo vedere solo il primo termine di ogni riga,
Riga array = "ZZZ;aaa;fff;hhh;mmm;ooo;*"
Sul Select devo vedere solo "ZZZ" e gli altri valori "aaa" ecc. in altrettanti campi input creati sulla finestra window. Anche guardando quanto scritto in VBS non riesco a tradurlo con JVS. Non so se sono riuscito a spiegarmi,Grazie per un suggerimento eventuale. Sandro
Ciao Sandro,
in tal caso può essere sufficiente riferirsi all'elemento in posizione [0] dell'array per popolare la select ed effettuare un ciclo dall'elemento in posizione [1] fino all'ultimo (in base alla lunghezza dell'array) per le altre operazioni. Fammi sapere!
Ho bisogno assolutamente di un programmatore professionista.Sono disposto a pagarti per risolvermi un problema.Ho due select concatenate.Quando clicco su una riga della tabella (operazione pdate)sulla prima riesco a selezionare l'elemento.Questa popola la seconda in base al valore selezionato.Sulla seconda non riesco invece a fare selezionare il valore del mio record.Se puoi aiutarmi ti mando il codice e cerchiamo un aaccordo economico Grazie