Dynamic select doesn't work correctly

Question

I got a problem with dynamic selects that not update their content when I change the selection.

I have 2 select inputs:

the first one is to select the category, for example cars, motorbike, etc and the second should show the various models - for example city car, sport car, etc... if you select cars in the first

But, in my code the second select doesn't update the content when I change the first one and I have to reload the page to see the changes.

I think the problem is in onchange, but I'm not sure, someone know how to resolve?

/*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;

}

<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>

update- now select works, but i ad duplicate entries in the second one

function creaSelectGruppo(categoria){
 var v1=[];var v2=[];
 for(var i=0;i<contenitore.lista.length;i++){
  if(contenitore.lista[i].categoria==categoria){v1.push(contenitore.lista[i]);v2.push(contenitore.lista[i].categoria);}
 }
 v2.sort();
 for(var i=0;i<v2.length;i++){
  if(v2[i]==v2[i+1]) not in  v2;
 }
 //fino a qui toglie tutti i duplicati ma lascia un buco nell'array
 var s = '<option value="null"  >Seleziona gruppo</option>';
 for(var i=0;i<v2.length;i++){
                try{
       if(v2[i]!=undefined){
         s += '<option value="' + v1[i].gruppo + '">' + v1[i].gruppo + '</option>';    
       }
                 }
     catch(Errore){}
 }
 document.getElementById("selectGruppo").innerHTML=s;
}

http://stackoverflow.com/questions/8674618/adding-options-to-select-with-javascript — epascarello, Sep 04 '15 at 12:29

WhiteHat · Accepted Answer · 2015-09-04T15:25:04.747

0

Try adding new Option instead of text

function crea_gruppo(categoria) {
  var gruppi = {};
  for (var i = 0; i < lista.length; i++) {
    if(lista[i].categoria==categoria)
    {
      gruppi[lista[i].gruppo] = true;
    }
  }

  // clear existing entries
  while (document.getElementById('selectGruppo').options.length > 0) {
    document.getElementById('selectGruppo').removeChild(document.getElementById('selectGruppo').options[0]);
  }

  document.getElementById("selectGruppo").add(new Option('Seleziona gruppo', ''));

  for (var i in gruppi) {
    document.getElementById("selectGruppo").add(new Option(i, gruppi[i]));
  }
}

edited Sep 04 '15 at 15:25

answered Sep 04 '15 at 12:31

WhiteHat

59,912
7
51
133

ok i partially solved, but now i got the results duplicated ' function creaSelectGruppo(categoria){ var v=[]; for(var i=0;i' + v[i].gruppo + ''; } document.getElementById("selectGruppo").innerHTML=s; } ' – Refarth Sep 04 '15 at 14:04
sounds good but I'm not sure I understand the comment. You're getting duplicate entries in the ` – WhiteHat Sep 04 '15 at 14:40
yes i got duplicate etries in the second select, i've tried to add sort but it work only once – Refarth Sep 04 '15 at 15:10

Dynamic select doesn't work correctly

1 Answers1