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="java script: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!
Edição feita por: ThinkBrunus, 31/07/2009, 07:21.
