[Resolvido] :upset: Preencher 4 combobox dinamicas

[ThinkBrunus 0]

Olá a todos!

 

Estou a desenvolver um formulário de inserção de dados, e pretendo que este tenha 4 combobox que sejam preenchidas dinamicamente sempre em função da opção escolhida na combo anterior.

 

Recorrendo a pesquisas e algumas dicas pelos fórums vou desenvolvendo, e de momento tenho dois códigos, estando encalhado nos dois!

 

O primeiro que já coloquei anteriormente num post sem respostas....

$(document).ready(function(){
         
         $("select[name=combo_classe]").change(function(){
            $("select[name=combo_subclasse]").html('<option value="0">Carregando...</option>');
            
            $.post("subclasse.php",
                  {combo_classe:$(this).val()},
                  function(valor){
                     $("select[name=combo_subclasse]").html(valor);
                  })
         })
		 
         $("select[name=combo_subclasse]").change(function(){
            $("select[name=combo_serie]").html('<option value="0">Carregando...</option>');
            
            $.post("serie.php",
                  {combo_subclasse:$(this).val()},
                  function(valor){
                     $("select[name=combo_serie]").html(valor);
                  })
         })		 
})

ele preenche a 2º conforme selecção do 1º, e no 3º preenche conforme selecção da 2ª. Mas se alterar a opção da 2ª combo ele não actualiza. É este o obstáculo para o qual não encontro solução...

 

Sem respostas, segui para o seguinte:

function changeClasse(){
xmlHttp = getXmlHttpObject(); //inicializa variável com identificação do browser
var classe = encodeURI(document.getElementById('combo_classe').value);
nocache = Math.random();
	xmlHttp.open("GET", "/admin/arquivo/teste.php?classe="+classe+"&nocache="+nocache);		
	xmlHttp.onreadystatechange = function(){
		if (xmlHttp.readyState == 4) {	
			document.getElementById("combo_subclasse").outerHTML = "<select id=\"combo_subclasse\" name=\"combo_subclasse\">" + xmlHttp.responseText + 
			"</select>";
		}
	}
xmlHttp.send(null);
}


function changeSubclasse(){
xmlHttp = getXmlHttpObject(); //inicializa variável com identificação do browser
var subclasse = encodeURI(document.getElementById('combo_subclasse').value);
nocache = Math.random();
	xmlHttp.open("GET", "/admin/arquivo/teste.php?subclasse="+subclasse+"&nocache="+nocache);		
	xmlHttp.onreadystatechange = function(){
		if (xmlHttp.readyState == 4) {	
			document.getElementById("combo_serie").outerHTML = "<select id=\"combo_serie\" name=\"combo_serie\">" + xmlHttp.responseText + 
			"</select>";
		}
	}
xmlHttp.send(null);
}

Agora neste ele preenche o 2º combo sem problemas, mas no terceiro quando chamo no HTML:

<select name="combo_subclasse" id="combo_subclasse" onchange="javascript:changeSubclasse()">

...ele não executa nada, presumo que não reconheça os valores que foram inserido pela função referida "function changeClasse()"

 

Ora tou no ponto que não sei para que lado virar-me, alguém pode dar-me uma ajuda?

 

Obrigado!

[ThinkBrunus 0]

Viva!

 

Está resolvido, como sugeriram adicionei a seguinte linha a todos os selects, fica o exemplo

document.getElementById("combo_serie").outerHTML = "<select id=\"combo_serie\" name=\"combo_serie\">" + xmlHttp.responseText + 
                        "</select>";

document.getElementById("combo_serie").onchange=changeSerie;

Por utilizar o outerHTML, o código não funciona no FF e se utilizar o innerHTML não apresenta valores...

Se houver alguém com alguma dica para o problema será bem vinda!

 

Obrigado!