salve a tutti, ho un problema con due select dinamiche, spero di spiegarvi bene
le due select prendono i valori del contenuto da un file xml
la prima mette una categoria, a seconda della categoria scelta, la seconda select dovrebbe cambiare il suo contenuto
esempio - nella prima select se seleziono veicoli nella seconda dovrebbero comparire terrestri e volanti
però quando cambio la prima select, il contenuto della seconda rimane invariato, e devo ricaricare la pagina per farlo apparire, credo che il problema sia nell' onchange, ma non ne sono molto sicuro
qualcuno sa come risolvere ? grazie in anticipo
Javascript ( ho inserito solo le parti che reputavo necessarie)
le due select prendono i valori del contenuto da un file xml
la prima mette una categoria, a seconda della categoria scelta, la seconda select dovrebbe cambiare il suo contenuto
esempio - nella prima select se seleziono veicoli nella seconda dovrebbero comparire terrestri e volanti
però quando cambio la prima select, il contenuto della seconda rimane invariato, e devo ricaricare la pagina per farlo apparire, credo che il problema sia nell' onchange, ma non ne sono molto sicuro
qualcuno sa come risolvere ? grazie in anticipo
HTML:
<select id="selectCategoria" onchange='crea_gruppo(document.getElementById("selectCategoria").options[document.getElementById("selectCategoria").selectedIndex].value);'>
<option selected="selected" value="null">Seleziona tipo di ricerca</option>
<option value="Personaggio">Personaggi</option>
<option value="Arma">Armi</option>
<option value="Veicolo">Veicoli</option>
</select>
<select id="selectGruppo">
<option selected="selected" value="">-seleziona-</option>
</select>
Javascript ( ho inserito solo le parti che reputavo necessarie)
Codice:
/*metodo con cui creo la prima select "categoria"*/
this.creaSelectCategoria =
function () {
var categorie = {};
for (var i = 0; i<this.lista.length; i++) {
categorie[this.lista[i].categoria] = true;
}
var s = "";
s+='<option value="null" >Seleziona una Categoria </option>';
for (var i in categorie) {
s += '<option value="' + categorie[i] + '">' + categorie[i] + '</option>';
}
return s;
}
/*metodo con cui creo la seconda select "gruppo"*/
this.creaSelectGruppo =
function () {
var c= document.getElementById("selectCategoria").value;
var gruppi = {};
for (var i = 0; i<this.lista.length; i++) {
if(this.lista[i].categoria==c){
gruppi[this.lista[i].gruppo] = this.lista[i].gruppo;
}
}
var s = "";
s+='<option value="null" >Seleziona un gruppo</option>';
for (var i in gruppi) {
s += '<option value="' + gruppi[i] + '">' + gruppi[i] + '</option>';
}
return s;
}
function inizializza(){
var nodo = caricaXML("elenco.xml");
contenitore.inizializza(nodo);
var nodoSelectCategoria = document.getElementById("selectCategoria");
nodoSelectCategoria.onchange= contenitore.creaSelectCategoria();
var nodoSelectGruppo = document.getElementById("selectGruppo");
nodoSelectGruppo.innerHTML = contenitore.creaSelectGruppo();
var c1 = document.getElementById("cerca1");
var c2 = document.getElementById("cerca2");
c1.onclick = cercaNome;
c2.onclick = cercaGruppo;
}
function crea_gruppo(categoria) {
var gruppi = {};
for (var i = 0; i < lista.length; i++) {
if(lista[i].categoria==categoria)
{
gruppi[lista[i].gruppo] = true;
}
}
var s = '<option value="null" >Seleziona gruppo</option>';
for (var i in gruppi) {
s += '<option value="' + i + '">' + i + '</option>';
}
document.getElementById("selectGruppo").innerHTML= s;
}