Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Djonatan Buss

[Resolvido] Popular select dinamicamente

Por , em Javascript

Recommended Posts

Djonatan Buss    0

Djonatan Buss
Postado

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??

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Djonatan Buss    0

Djonatan Buss
Postado

É 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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Djonatan Buss    0

Djonatan Buss
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Djonatan Buss    0

Djonatan Buss
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito