• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

thinkbrunus

Preenchimento dinâmico 4 combos

12 mensagens neste tópico

Viva!

Depois de várias pesquisas sobre o preenchimento dinâmico de combos, passei à prática e estou com dificuldade em perceber o que não está bem no código.

Pretendo preencher cada combo dependendo uns dos outros, na realidade classe > subclasse > serie > subserie, desta forma subclasse depende da classe, serie depende da subclasse e a subserie da série.

Nesta base comecei a trabalhar neste código e estou parado no preenchimento da 3ª compo, que não reconhece quando à mudança na segunda...

$(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);
                  	})					              
         })

      })

Certamente alguma coisa não está certa, que será?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Boas,

Experimenta usar a função bind em vez do change directamente.

$("select[name=combo_subclasse]").bind('change', function() {} );

Como a 2ª combo é dinâmica, pelo que percebi, como o html muda e o javascript apanha tudo o que é carregado inicialmente no site, tens de usar o bind para html que seja dinâmico, e as funções mais directas (click, hover, change, etc) para o que vem quando carregas inicialmente (isto é opcional, podes sempre usar o bind para tudo).

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

sim, a 2ª combo é dinâmica, aliás todas são...

Se percebi bem, é suposto ficar assim?

$(document).ready(function(){
         
         $("select[name=combo_classe]").bind('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]").bind('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);
                  }
                  )		  
         });
      })

Fica na mesma.....não resolve o problema

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Com a alteração fica tudo exactamente na mesma, segundo a tua dica ele deveria actualizar o resultado da 3ª combo e buscar os resultados tendo em conta a opção seleccionada na 2ª combo...

Ele o que faz é preencher a 3ª combo e alterando o valor da 2ª os resultados mantêm-se....

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Tenho um código semelhante a funcionar num site, mas não uso o post do jquery para tal .. não sei se é por isso ..

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Viva!

No seguimento do post anterior, dada a incopatibilidade do innerHTML, segui a alternativa recomendada pela maioria das pessoas, o createElement.

Seguindo algumas dicas conseguir que adicione os dados na combo, fazendo 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, escrevendo apenas todos os valores retornados.

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> ")

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Boas,

Retorna o resultado do php como string JSON ou xml, que o jquery foi feito para interpretar esse tipo de dados como arrays / objectos.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora