Preencher 4 combobox dinamicas!

[ThinkBrunus]

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="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!

Editado Julho 21, 2009 por ThinkBrunus

[Jonathan Queiroz]

Isso acontece porque ao chamar a função changeClasse você modificou o HTML do elemento combo_subclasse, removendo o evento onchange

Tente assim:

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

Ou:

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

Mas acho que, ao invés de utilizar o outerHTML o melhor seria innerHTML inserindo apenas o conteúdo interno do elemento

[ThinkBrunus]

Olá Jonathan,

Primeiro utilizei o inner.HTML, mas ele não escrevia nada,fiz um alert e ele retornava os valores certos (todos os options preenchidos) e não os escrevia no HTML.

Dada a situação alterei para outerHTML e começou a escrever correctamente...

Testei as tuas sugestões, a 1ª dá-me um erro estranho, mas a 2ª funciona na perfeição. Era essa tal alteração do código HTML que estava faltando o onchange.

Relativamente ao innerHTML em vez de outerHTML não sei se há alguma solução, na verdade o outerHTML não funciona correctamente no FF.

Muito obrigado pela tua dica!

[Jonathan Queiroz]

Primeiro utilizei o inner.HTML, mas ele não escrevia nada,fiz um alert e ele retornava os valores certos (todos os options preenchidos) e não os escrevia no HTML.

So invés de inner.HTML utilize innerHTML

Lembre-se de que se fizer isso não será necessário escrever o código do select

Obs.:

O tópico pode ser marcado como Resolvido ?

[ThinkBrunus]

No meio de tanta conotação de variáveis enganei-me (inner.HTML)...

Então corrige-me se estiver enganado, se utilizar o innerHTML ficaria assim:

document.getElementById("combo_serie").innerHTML = xmlHttp.responseText;

onde estaria a retornar para o responseText

echo "<option value='0'><-- Seleccione a opção --></option>";
                while ($rs = mysql_fetch_assoc($query)){
                    echo '<option value="' . $rs['id_serie']. '">' . $rs['designacao']. '</option>';
                }

é isto?

[Jonathan Queiroz]

Sim, seria algo assim.

[ThinkBrunus]

Antes de fazer este post já tinha tentado utilizar o innerHTML, mas sem sucesso, surgia a combo sem valores...então mudei para o outerHTML, mas mantém-se o problema de funcionar só no IE, achas que há alguma possibilidade de colocar a funcionar também no FF?

[Jonathan Queiroz]

Imaginei que o innerHTML fosse funcionar...

Mas de qualquer forma não é a melhor forma de fazer. O ideal é utilizar o método createElement do document para criar elementos de forma dinâmica.

Mude o código PHP para retornar os valores assim:

VALOR_ID,codigo|OUTRO_ID,blablabla|MAIS_UM_ID,mais_um_codigo

E no JavaScript você pode fazer assim:

lista_valores=retorno_php.split("|")
var a
var id,codigo
var seu_select=document.getElementById("combo_serie")
var seu_option
for(var i=0;i<lista_valores.length;i++){
a=lista_valores[i].split"(,")
id=a[0]
codigo=a[1]
seu_option=document.createElement("option")
seu_option.value=id
seu_option.innerHTML=codigo
seu_select.appendChild(seu_option)
}

[ThinkBrunus]

Ok, vou alterar o código seguindo a tua dica!

Obrigado!

[ThinkBrunus]

Seguindo a tua dica, acabei por fazer 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/subclasse.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>";
//onchange="java script:changeClasse();validaCampo('combo_classe')"
            //document.getElementById("combo_subclasse").innerHTML = xmlHttp.responseText;        
                result = xmlHttp.responseText.split("|");
                for(var i=0;i<result.length;i++){    
                    var newOpt = document.createElement("option");
                    newOpt.innerHTML = result[i];
                    var container = document.getElementById("combo_subclasse");
                    container.appendChild(newOpt);
                }
            infoClasse(classe);
//document.getElementById("combo_subclasse").onchange=changeSubclasse; validaCampo("combo_subclasse");
        }
    }
xmlHttp.send(null);
}

e na página PHP que retorna os valores:

$sql = "SELECT * FROM subclasse WHERE id_classe='".mysql_real_escape_string($_GET['classe'])."'";
    $query = mysql_query($sql) or die(mysql_error());
        if (mysql_num_rows($query) == 0){
            echo ".: Seleccionar primeiro a classe :.";
        } else {
            echo '.: Seleccionar :.';
                while ($rs = mysql_fetch_assoc($query)){
                    //echo $rs['id_subclasse'].'|'.$rs['codigo'].'|'.$rs['designacao'];                
                    echo $rs['id_subclasse']."|".$rs['codigo']."|".$rs['designacao'];
                }
        }

Ele realmente escreve todos os valores, mas sem nenhuma organização...

Como poderei adaptar o código para que escreva o valor do option e o respectivo texto?

(como se fizesse innerHTML="<option value="$rs['id_subclasse']">$rs['codigo']."/".$rs['designacao']</option> ")

Editado Agosto 18, 2009 por ThinkBrunus

[Jonathan Queiroz]

Como assim "sem nenhuma organização" ?

De qualquer forma você pode utilizar XML para isso ou um separador diferenciado para cada campo.