Publicado em 8 de out.

[Resolvido] Popular select dinamicamente

Bom galera, esotu criando um arquivo para o cadastro de animal. Para isso é necessario que se escolha a Espécie do animal e também a Raça...

Porem, infelizmente, não existem gatos do tipo bulldog, cachorros siameses e ratos charoles...

então preciso popular um combo após a escolha da Espécie, de acordo com os valores vindos do banco

então na tabela ESPECIE eu tenho todas especies possiveis com valores int pra cada uma

na tabela raça eu tenho todas as raças com valor int pra cada um e também o valor de relacionamento para espécie...

estou populando os combos da seguinte maneira:

Especie: <?

 $buscaEspecie = odbc_exec($con,"SELECT * FROM HOSPVET.ESPECIE");
 echo "<select name='anm_especie' onchange='listaRaca(this.value)'>";

 while ($resultadoEspecie = odbc_fetch_array($buscaEspecie))
 {
 echo "<OPTION VALUE='$resultadoEspecie[ESP_CODIGO]'>".$resultadoEspecie[ESP_NOME]."</OPTION>";
 }
 echo "</SELECT>";
	?>
	<br />

Raça: <?

 $buscaRaca = odbc_exec($con,"SELECT * FROM RACA");
 echo "<select name='anm_raca'>";
 while ($resultadoRaca = odbc_fetch_array($buscaRaca))
 {
 echo "<OPTION VALUE='$resultadoRaca[RAC_CODIGO]'>".$resultadoRaca[RAC_NOME]."</OPTION>";
 }
 echo "</SELECT>";
 ?>

Porém lista todas as raças possíveis... existe a possibilidade de fazer isso utilizando javascript ou só com ajax??

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

William Bruno· 8 de out.

Criei um script bem simples:

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

AJAX é Javascript.

A 'diferença' é que AJAX usa o objeto xmlHttpRequest para fazer requisições assíncronas ao servidor. Sem ele, atualizar determinadas áreas de um site sem refresh, é impossível. Tem como fazer o mesmo efeito, usando Javascript puro.

Porém para isso, você precisa ter já na página HTML todos os dados possíveis carregados. Guardados num vetor, ou com display: none; por exemplo. Dependendo do processo e do que se quer, isso é bem inviável.

Por isso que usa-se AJAX, para trazer do servidor a resposta server-side.

Djonatan Buss· 8 de out.

ok, vou dar uma estudada no teu código e ver as adaptações necessárias...

klonder· 8 de out.

Abaixo uma maneira para popular um select de acordo com a opção escolhida em outro select. Esse é apenas um modelo caso você não opte por fazer em AJAX, mas creio que, nesse caso, ou dependendo do número de dados armazenados no Banco de Dados, AJAX seria a melhor opção.

Em todo caso, essa é uma maneira simples em JavaScript, sem AJAX:

<html>
<head>
<script type="text/javascript">
var x = new Array("");

var Brasil = new Array("Acre","Alagoas","Amapá","Amazonas","Bahia","Ceará","Distrito Federal","Goiás","Espírito Santo","Maranhão","Mato Grosso","Mato Grosso do Sul","Minas Gerais","Pará","Paraiba","Paraná","Pernambuco","Piauí","Rio de Janeiro","Rio Grande do Norte","Rio Grande do Sul","Rondônia","Roraima","São Paulo","Santa Catarina","Sergipe","Tocantins");

var Argentina = new Array("Buenos Aires","Chaco","Catamarca","Chubut","Córdoba","Corrientes","Entre Ríos","Formosa","Jujuy","La Pampa","La Rioja","Mendoza","Misiones","Neuquén","Río Negro","Salta","San Juan","San Luis","Santa Cruz","Santa Fe","Santiago del Estero","Tierra del Fuego","Tucumán");

var Paraguai = new Array("Departamento Alto Paraguay","Departamento Alto Paraná","Departamento Amambay","Distrito Capital","Departamento Boquerón","Departamento Caaguazú","Departamento Caazapá","Departamento Canindeyú","Departamento Central","Departamento de Concepción","Departamento Cordillera","Departamento Guairá","Departamento Itapúa","Departamento Misiones","Departamento Ñeembucú","Departamento Paraguarí","Departamento Presidente Hayes","Departamento San Pedro");

//Outra opção é deixar a primeira opção em branco. Exemplo:

//var Argentina = new Array("","Cidade de Buenos...

function loadList(v) {
var objSpan1 = document.getElementById("estado");
var listaEscolhida = eval(v);

if (listaEscolhida==x) {
	objSpan1.style.display = "none";

}else{

	objSpan1.style.display = "block";
}

document.form1.sEstado.options.length = listaEscolhida.length;
	for (i=0; i<listaEscolhida.length; i++) {
 document.form1.sEstado.options[i] = new Option(listaEscolhida[i], listaEscolhida[i]);
	}
}

function resetLists() {
	loadList("x");
	document.form1.sPais.options[0].selected = true;
}
window.onload = resetLists;
</script>
</head>
<body>
<form name="form1" method="post" action="echo_post.php">
País: <select name="sPais" onchange="loadList(this.value)" size="1">
<option value="x" selected></option>
<option value="Argentina">Argentina</option>
<option value="Brasil">Brasil</option>
<option value="Paraguai">Paraguai</option>
</select>

<span id="estado">
<br><br>Estados ou Distritos:
<select name="sEstado" size="1"></select></span>
</form>
</body>
</html>

Djonatan Buss· 9 de out.

É realmente vou usar ajax... não quero deixar uma lista estática pra popular os combos, vai dar bagunça no futuro imagino eu...

Mas valeu a ajuda... vou tentar usar o script do William e depois eu posto aqui se foi resolvido.

Djonatan Buss· 14 de out.

Bom resolvi...

Não utilizei a alternativa do William Bruno porque mesclava jquery e não quero bagunçar minha cabeça e meu código, além de não entender a disposição de algumas partes do código dele...

Utilizei Ajax "obviamente" (descobri agora que é obvio que necessita de AJAX pra isso(usando BD) (ou não))

Vo almoçar agora mas logo eu edito esse post e coloco a alternativa que ficou 10!

Djonatan Buss· 14 de out.

Perdão pelo flood mas achei que seria simples editar o outro post

Resumindo aqui vai o código, vou tentar explicar a parte "dinamica"

SELECTS DEPENDENTES

Especie: <?

 $buscaEspecie = odbc_exec($con,"SELECT * FROM SUA_TABELA");
 echo "<select name='anm_especie' onchange='listaRaca(this.value)'>"; // a função listaRaça que vai chamar a consulta necessaria
 echo "<OPTION VALUE='none'>Escolha a espécie</OPTION>";

 while ($resultadoEspecie = odbc_fetch_array($buscaEspecie))
 {
 echo "<OPTION VALUE='$resultadoEspecie[ESP_CODIGO]'>".$resultadoEspecie[ESP_NOME]."</OPTION>"; //[ESP_CODIGO] é o campo da tabela assim como [ESP_NOME]
 }
 echo "</SELECT>";
	?>
	<br />

Raça: <?

 $buscaRaca = odbc_exec($con,"SELECT * FROM SUA_OUTRA_TABELA"); //no meu caso tenho uma tabela para raças e outra para especies
 echo "<select name='anm_raca'>";
 echo "<OPTION VALUE='none'>Selecione espécie</OPTION>";
 echo "</SELECT>";
 ?>

Arquivo populacombo.js

function listaRaca( valor )
{

 http.open("GET", "reloadRaca.php?id=" + valor, true); // reloadRaca é o arquivo que faz a conexao com o banco e o select necessario
	http.onreadystatechange = handleHttpResponse;
	http.send(null);

}

function handleHttpResponse()

{

 campo_select = document.forms[0].anm_raca;
 if (http.readyState == 4) {
 campo_select.options.length = 0;
 results = http.responseText.split(",");
 for( i = 0; i < results.length-1; i++ )
 {
 string = results[i].split( "|" );
 campo_select.options[i] = new Option( string[1], string[0] );
 }
 }
}

function getHTTPObject() {
	var req;

	try {
 if (window.XMLHttpRequest) {
 req = new XMLHttpRequest();

 if (req.readyState == null) {
 req.readyState = 1;
 req.addEventListener("load", function () {
 req.readyState = 4;
 if (typeof req.onReadyStateChange == "function")
 req.onReadyStateChange();
 },
 false);
 }

 return req;
 }

 if (window.ActiveXObject) {
 var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];

 for (var i = 0; i < prefixes.length; i++) {
 try {
 req = new ActiveXObject(prefixes[i] + ".XmlHttp");
 return req;
 } catch (ex) {};

 }
 }
	} catch (ex) {}

	alert("XmlHttp Objects not supported by client browser");
}

var http = getHTTPObject();

Arquivo reloadRaca.php

<?php
 include ("../includes/conecta.php");

 $codest = $_GET['id'];

 $query = odbc_exec($con,"SELECT * FROM RACA WHERE ESP_CODIGO = $codest ORDER BY RAC_CODIGO"); // a pesquisa de acordo com o segundo select
 $result = odbc_fetch_array($query);
 $totreg = odbc_num_rows($query);

 if($totreg == 0) {
 echo "0 | NENHUMA RAÇA DISPONIVEL";
 }
 else {
 while($result = odbc_fetch_array($query)) {
 $anm_rac = $result[RAC_CODIGO];
 $rac_nome = $result[RAC_NOME];
 echo $anm_rac."|" .$rac_nome.",";
 }
 }
?>

da pra debugar executando o "reloadRaca.php?id=" direto no navegador... vai retornar uma linha de texto que delimita o codigo do nome por uma | e separa cada par por virgula, depois disso o AJAX faz todo serviço, pelo menos no meu nivel de abstração!