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.