Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom tenho aqui um código que peguei aqui mesmo no imaster em ajax estado e Cidade, a questão é a seguinte quero deixar as duas opções com o select ja definido, por exemplo o campo Estado já consegui deixa-ló com a opção Minas Gerais **marcada**, usei o seguinte comando em javascript.
**<script language="JavaScript">Dados(13);</script>** logo abaixo do formulário.
Agora a parte que estou tendo dificuldades é deixar o campo Cidade definido com Belo Horizonte, abaixo segue o códido de todo o sistema.
conexao.php
<?php
$host = "localhost"; //endereço do seu servidor MySQL
$database = "teste_ajax"; //preencha com o nome do BD que contem a tabela que criamos
$login_db = "root"; //login usado para acessar seu BD
$senha_db = ""; //senha usada para acessar seu BD
// não altere mais nada abixo desta linha
$connection = mysql_connect("$host","$login_db","$senha_db")
or die ("Não foi possivel conectar ao servidor.");
$db = mysql_select_db("$database", $connection)
or die("Não foi possivel selecionar o banco de dados.");
?><?php
//CONECTA AO MYSQL
require_once("conexao.php");
//PEGA OS ESTADOS
$sql = "
SELECT a.id_estado, a.dsc_estado, a.sigl_estado
FROM estados a
ORDER BY a.dsc_estado";
//EXECUTA A QUERY
$sql = mysql_query($sql);
$row = mysql_num_rows($sql);
?>
<script language="JavaScript">
function Dados(valor) {
//verifica se o browser tem suporte a ajax
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(ex) {
try {
ajax = new XMLHttpRequest();
}
catch(exc) {
alert("Esse browser não tem recursos para uso do Ajax");
ajax = null;
}
}
}
//se tiver suporte ajax
if(ajax) {
//deixa apenas o elemento 1 no option, os outros são excluídos
document.forms[0].listCidades.options.length = 1;
idOpcao = document.getElementById("opcoes");
ajax.open("POST", "cidades.php", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.onreadystatechange = function() {
//enquanto estiver processando...emite a msg de carregando
if(ajax.readyState == 1) {
idOpcao.innerHTML = "Carregando...!";
}
//após ser processado - chama função processXML que vai varrer os dados
if(ajax.readyState == 4 ) {
if(ajax.responseXML) {
processXML(ajax.responseXML);
}
else {
//caso não seja um arquivo XML emite a mensagem abaixo
idOpcao.innerHTML = "--Primeiro selecione o estado--";
}
}
}
//passa o código do estado escolhido
var params = "estado="+valor;
ajax.send(params);
}
}
function processXML(obj){
//pega a tag cidade
var dataArray = obj.getElementsByTagName("cidade");
//total de elementos contidos na tag cidade
if(dataArray.length > 0) {
//percorre o arquivo XML paara extrair os dados
for(var i = 0; i < dataArray.length; i++) {
var item = dataArray[i];
//contéudo dos campos no arquivo XML
var codigo = item.getElementsByTagName("codigo")[0].firstChild.nodeValue;
var descricao = item.getElementsByTagName("descricao")[0].firstChild.nodeValue;
idOpcao.innerHTML = "--Selecione uma das opções abaixo--";
//cria um novo option dinamicamente
var novo = document.createElement("option");
//atribui um ID a esse elemento
novo.setAttribute("id", "opcoes");
//atribui um valor
novo.value = codigo;
//atribui um texto
novo.text = descricao;
//finalmente adiciona o novo elemento
document.forms[0].listCidades.options.add(novo);
}
}
else {
//caso o XML volte vazio, printa a mensagem abaixo
idOpcao.innerHTML = "--Primeiro selecione o estado--";
}
}
</script>
<html>
<head>
<title>Ê</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
<form method="get" name="frmAjax">
Estado:
<select name="listEstados" onChange="Dados(this.value);">
<option value="0">--Selecione o estado >></option>
<?php for($i=0; $i<$row; $i++) { ?>
<option value="<?php echo mysql_result($sql, $i, "id_estado"); ?>" <?php if(mysql_result($sql, $i, "id_estado") == 13) echo "selected=selected";?>>
<?php echo mysql_result($sql, $i, "dsc_estado"); ?></option>
<?php } ?>
</select>
<br><br>
Cidade:
<select name="listCidades" onChange="Bairro(this.value);">
<option id="opcoes" value="0">--Primeiro selecione o estado--</option>
</select>
<label> <br>
<br>
</label>
<p>
<label>
<input type="submit" name="Submit" value="Submit">
</label>
</p>
<label> </label>
</form>
[b]<script language="JavaScript">Dados(13);</script>[/b]
</body>
</html>
cidade.php
<?php
//CONECTA AO MYSQL
require_once("conexao.php");
//RECEBE PARÃMETRO
$pEstado = $_POST["estado"];
//QUERY
$sql = "
SELECT a.id_cidade, a.dsc_cidade
FROM cidades a
WHERE a.cod_estado = ".$pEstado."
ORDER BY a.dsc_cidade";
//EXECUTA A QUERY
$sql = mysql_query($sql);
$row = mysql_num_rows($sql);
//VERIFICA SE VOLTOU ALGO
if($row) {
//XML
$xml = "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n";
$xml .= "<cidades>\n";
//PERCORRE ARRAY
for($i=0; $i<$row; $i++) {
$codigo = mysql_result($sql, $i, "id_cidade");
$descricao = mysql_result($sql, $i, "dsc_cidade");
$xml .= "<cidade>\n";
$xml .= "<codigo>".$codigo."</codigo>\n";
$xml .= "<descricao>".ucfirst(strtolower($descricao))."</descricao>\n";
$xml .= "</cidade>\n";
}//FECHA FOR
$xml.= "</cidades>\n";
//CABEÇALHO
Header("Content-type: application/xml; charset=iso-8859-1");//PRINTA O RESULTADO
echo $xml;
?>
e o SQL da Base de Dados
>
-- phpMyAdmin SQL Dump
-- version 2.6.2-pl1
--
-- Servidor: localhost
-- Tempo de Geração: Out 29, 2007 as 09:48 PM
-- Versão do Servidor: 4.0.21
-- Versão do PHP: 5.2.3
--
-- Banco de Dados: teste_ajax
--
--
-- Estrutura da tabela cidades
--
CREATE TABLE `cidades` (
`ID_CIDADE` int(11) NOT NULL auto_increment,
`DSC_CIDADE` varchar(100) NOT NULL default '',
`COD_ESTADO` char(2) NOT NULL default '',
PRIMARY KEY (`ID_CIDADE`)
);
-- Estrutura da tabela estados
CREATE TABLE `estados` (
`ID_ESTADO` int(3) NOT NULL auto_increment,
`DSC_ESTADO` varchar(100) NOT NULL default '',
`SIGL_ESTADO` char(2) NOT NULL default '',
PRIMARY KEY (`ID_ESTADO`)
);
Espero que me ajudem, valeu.
Carregando comentários...