Question

我遇到动态选择的问题，当我更改选择时不会更新其内容。

我有2个select输入：

第一个是选择类别，例如汽车，摩托车等第二个应该显示各种模型 - 例如城市汽车，跑车等......如果你在第一个中选择cars

但是，在我的代码中，当我更改第一个选项时，第二个选择不会更新内容，我必须重新加载页面以查看更改。

我认为问题出在onchange，但我不确定，有人知道如何解决？

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

更新 - 现在选择有效，但我在第二个

中重复输入

＆＃13;

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

＆＃13;

Answer 1

尝试添加new Option而不是文字

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]));
  }
}

动态选择无法正常工作

1 个答案: