problema con select dinamiche e javascript

Discussione in 'Javascript' iniziata da HyperX, 4 Settembre 2015.

  1. HyperX

    HyperX Nuovo Utente

    Registrato:
    28 Agosto 2015
    Messaggi:
    2
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    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

    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;
          
    }
     
Sto caricando...

Condividi questa Pagina