10 novembre 2008

Javascript, aggiungere options ad una selectbox

Una problematica classica di chiunque utilizzi javascript è quella di dover aggiungere delle option alle selectbox.
E' possibile facilitarsi il compito creando delle opportune funzioni alle quali passando l'id della select box e un elenco (in questo caso map da cui recuperare le opzioni da inserire nella select box esistente aggiorna la textbox senza dover ricaricare la pagina.
Queste funzioni sono utilissime qualora si stessero utilizzando framework Ajax come ad esempio Dwr. In tal caso è sufficiente richiamarle come postback di una chiamata asincrona mediante Ajax.

Ecco un esempio di un metodo che svolge questo compito:
 // metodo per aggiornare qualsiasi tipo di elenco di options
// per id si intende l'id della selectbox
function addOptionValues(_id,_map){
var sel = document.getElementById(_id);
var opt = null;
if(sel != null){
for(var prop in _map) {
opt=document.createElement("option");
opt.setAttribute("value",prop);
opt.appendChild(document.createTextNode(_map[prop]));
sel.appendChild(opt);
}
}
}


Una possibile estensione è la seguente, in cui oltre a specificare l'elenco delle opzioni da aggiungere, ne seleziona una specifica il cui valore viene passato in input :
// metodo per aggiornare qualsiasi tipo di elenco di options selezionandone una
// per id si intende l'id della selectbox
function addOptionValuesSel(_id,_map,selez){
var sel = document.getElementById(_id);
var opt = null;
if(sel != null){
for(var prop in _map) {
opt=document.createElement("option");
opt.setAttribute("value",prop);
if (prop == selez){
opt.setAttribute("selected","selected");
}
opt.appendChild(document.createTextNode(_map[prop]));
sel.appendChild(opt);
}
}
}

Nessun commento: