Como carregar consulta de um select baseado em outro?

[Ilano 0]

Olá pessoal,

 

No projeto q atualizei neste link, tenho uma tela de cadastro de clientes e lá possuo dois selects (dropdowns): Estado e Cidade.

 

No objCidades tenho duas funções:

 

- ListarEstados, q está funcionando perfeitamente no form.

- PovoaCidades, q é onde está o problema.

 

Voltando ao form de clientes, no select ddlEstado implementei um onchange='popCidade()', o problema é q não está carregando o select ddlCidade.

 

javascript

 

function popCidade()

{

document.frmClientes.acao.value ="cidade";

document.frmClientes.action = "cadClientes.php";

//document.frmClientes.submit(); Se eu fizer esse submit a página será carregada e todos os demais campos serão limpos.

}

 

Então, como posso aplicar esse recurso, ao selecionar um Estado (ddlEstado) filtrar as cidades em outro select (ddlCidade)?

 

Grato,

 

Ilano.

[Paulo de Tarso F. M. 24]

Seu problema não é com o PHP, mas sim com Javascript... http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif Isso se faz com Ajax...

[Henrique Barcelos 290]

Você precisa gerar as options do select com o PHP e dar um echo nelas, em uma página separada. Chamemos de "opcoes_cidades.php";

 

Se não utiliza nenhuma biblioteca e não conhece muito bem Ajax, fica meio difícil explicar do começo.

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://forum.imasters.com.br/index.php?/topic/404018-script-para-manipulacao-de-ajax/page__pid__1584189__st__0entry1584189

 

Este script que eu desenvolvi não usa nada além do núcleo do JS, é só baixar e incluir na página.

 

Pois então, você tem 2 selects: ddlEstado e ddlCidade, que imagino ser o nome e tbm o ID de ambos. Se não for, coloque o ID também com esse valor.

 

Vamos ao código:

 

var selectEstado = document.getElementById("ddlEstado");
select.Estado.onchange = function(){
	if(this.value == '') return false;
	
	var estado_selcionado = this.value;
	var data = {
 	estado: estado_selecionado
	}
	
	var selectCidade = document.getElementById("ddlCidade");
	//Utilizando agora o script que eu indiquei:
	var ajax = new myAjax();
	ajax.post("opcoes_cidades.php", selectCidade);
}

[GNUCLEAR 0]

Estoucom um problema similar, sendo que meu box é maior um pouco e inclui também os bairros na consulta.

 

Peguei um tutorial e tentei adaptar ele a minha realidade. Mas o código não está funcionando.

 

endereço do tutorial http://www.gilbertoalbino.com/criar-combo-dinamico-em-ajax-com-jquery-php/

 

vejam como está:

 

formulario:

  <select name="estados" id="estados" onchange="buscacidades('xmlcidades.php','cidades');">
          <option selected="selected" value="NDA">-- Estados --</option>
          <option value="PB">PARAÍBA</option>
          <option value="AL">ALAGOAS</option>
          <option value="CE">CEARÁ</option>
          <option value="PE">PERNAMBUCO</option>
          <option value="RN">RIO GRANDE DO NORTE</option>
          <option value="SE">SERGIPE</option>
        </select>
        <br />
        <select name="cidades" id="cidades" onchange="alert(this.value);" >
          <option>-- Escolha um Estado --</option>
        </select>
        <br />
        <select name="bairros" id="bairros">
          <option>-- Escolha uma Estado --</option>
        </select>

o código do javascript:

 

jQuery(document).ready
(
	function() 
	{
		comboDinamico("estados", "cidades", "bairros");
			}
);

comboDinamico = function(estados, cidades, bairros) {

	var estado = document.getElementById(estados);
	var cidade = document.getElementById(cidades);
	var bairro = document.getElementById(bairros);

	$(estados).load('localizacoes.php?tipo=estado');
	$(estados).change(
		function() {
			if($(this).val() == 0) {
				alert('Você precisa informar o ESTADO!');
				$(this).focus();
			} else {		
				$(cidades).load('localizacoes.php?tipo=cidade&estado=' + $(this).val());
			}
		}
	);
	$(cidades).change(
		function() {
			if($(this).val() == 0) {
				alert('Você precisa informar a CIDADE!');
				$(this).focus();
			} else {		
				$(bairros).load('localizacoes.php?tipo=bairro&cidade=' + escape($(this).val()));
			}
		}
	);	

	$(bairros).change(
		function() {
			if($(this).val() == 0) {
				alert('Você precisa informar o BAIRRO!');
				$(this).focus();
			} else {		
				return true;
			}
		}
	);	
}

e por fim o código que monta os combobox

	switch($_GET['tipo'])
	{
		case 'estado' :
			$sql = mysql_query("SELECT * FROM estados_federacao")or die("Query invalida: " . mysql_error());
			while ($row = mysql_fetch_array($result)) {
     		$option = $row["uf"];
	 		$string = $row["estado"];
	 		echo "<option value=\"$option\">$string</option>";
   }
			break;
		case 'cidade' :
			$sql = mysql_query("SELECT * FROM municipios WHERE uf = '%uf'", $_GET['estado']);
     		$option = $row["nome_municipio"];
	 		$string = $row["nome_municipio"];
	 		echo "<option value=\"$option\">$string</option>";			
			break;			
		case 'bairro' :
			$sql = sprintf("SELECT * FROM municipios_bairros WHERE cidade = 'municipio'", ($_GET['cidade']));
     		$option = $row["bairro_id"];
	 		$string = $row["bairro"];
	 		echo "<option value=\"$option\">$string</option>";	
			break;			
	}

desde já agradeço pela ajuda

[William Bruno 1501]

hum... não gosto desse tipo de código...

 

o método 'load()', não serve para isso..

e outra, você está sobrescrevendo o evento... retire a marcação inline do html:

onchange="buscacidades('xmlcidades.php','cidades');"

ou você usa jQuery sempre, ou você usa javascript... fazer com js, oq poderia ser feito com jQuery, não faz sentido..

vejo várias falhas nessa proposta.

 

Olhe uma minha, mais 'correta':

http://forum.imasters.com.br/index.php?/topic/365795-combos-dependentes-ajax-jquery/