Ir para conteúdo

POWERED BY:

Arquivado

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

ndecastro

Problema em preencher select com ajax

Por , em Javascript

Recommended Posts

ndecastro    0

ndecastro
Postado

Pessoal, estou iniciando em ajax e estou com um problema em preencher um select, já procurei em vários lugares, mas não achei nada sobre o meu problema, apesar de esse assunto comum, não tive sucesso, já revisei o meu codigo varias vezes encontrei alguns erros, mas mesmo após de resolve-los o problema continua.

 

Resumindo o erro, o select não carrega

 

Esse é o código onde está o select:

CODE
<html>

<head>

<?php

include("includes/title.php");

?>

<script type="text/javascript">

try{

xmlhttp = new XMLHttpRequest();

}catch(ee){

try{

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

}catch(e){

try{

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}catch(E){

xmlhttp = false;

}

}

}

 

function doBusca(tuf){

 

//limpa o select

var c=document.getElementById("cidade");

while(c.options.length>0)c.options[0]=null;

c.options[0]=new Option(" -- Aguarde ... -- "," -- Aguarde ... -- ");

 

//Monta a url com a uf

xmlhttp.open("GET", "ajax.php?id="+tuf,true);

 

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4){

//Transforma a lista de cidades JSON em Javascript

var json=eval("("+xmlhttp.responseText+")");

 

//limpando o select da icdade

var obj = document.getElementById('cidade');

while(obj.firstChild){

obj.removeChild(obj.firstChild);

}

 

//popula o select com a lista de cidades obtida

var i=0;

for(i=0;i<json.cidade.length;i++){

//criando o option que ira preencher o select

var option = document.createElement("option");

//atribuindo um valor a propriedade value do option

option.setAttribute("value",json.cidade.id);

//atribuindo o texto que vai aparecer no option

option.appendChild(document.createTextNode(json.cidade.nome));

document.getElementById(document.createTextNode(json.cidade.nome));

//atribuindo o option criado ao select cidade

document.getElementById("cidade").appendChild(option);

}

}

}

 

xmlhttp.send(null)

}

 

</script>

</head>

<body bgcolor="#000000">

<div class="apresentacao">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="800" HEIGHT="580" id="index" ALIGN="">

<param NAME="movie" VALUE="flash/index.swf" />

<param NAME="quality" VALUE="high" />

<param NAME="bgcolor" VALUE="#000000" />

<param name="wmode" value="transparent" />

<EMBED src="flash/index.swf" wmode="transparent" quality=high bgcolor=#000000 WIDTH="800" HEIGHT="580" NAME="index" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>

</object>

</div>

<!-- Idioma -->

<div class="idioma">

<span id="eua"><img src="img/gif/eua.gif"></span>

<span id="bra"><img src="img/gif/bra.gif"></span>

<span id="esp"><img src="img/gif/esp.gif"></span>

</div>

<!-- Entrar -->

<div id="entrar" class="entrar_est">Entrar</div>

<!-- Cidade -->

<div id="localizacao" class="localizacao">

<form>

<label for="id">

UF:<select name="id" id="id" onchange="doBusca(this.options[this.selectedIndex].value)">

<option value="--">--</option>

<option value="1">AC</option>

<option value="2">AL</option>

<option value="4">AM</option>

 

<option value="3">AP</option>

<option value="5">BA</option>

<option value="6">CE</option>

<option value="7">DF</option>

<option value="8">ES</option>

<option value="9">GO</option>

 

<option value="10">MA</option>

<option value="13">MG</option>

<option value="12">MS</option>

<option value="11">MT</option>

<option value="14">PA</option>

<option value="15">PB</option>

 

<option value="17">PE</option>

<option value="18">PI</option>

<option value="16">PR</option>

<option value="19">RJ</option>

<option value="20">RN</option>

<option value="22">RO</option>

 

<option value="23">RR</option>

<option value="21">RS</option>

<option value="24">SC</option>

<option value="26">SE</option>

<option value="25">SP</option>

<option value="27">TO</option>

</select>

</label>

<label for="cidade">

Cidade:<select name="cidade" id="cidade" onChange="alert(this.value);"></select>

</label>

</form>

</div>

</body>

</html>

E esse é o código onde recupero os nomes das cidades:

CODE
<?php

//para fazer com que seja entendido todos os caracteres

header ( " Content - Type : text / html ; charset =iso -8859 -1 " ) ;

 

//chamando a pagina de conexao com o banco de dados

include("conex.php");

//criando a instrução de busca

$instrucao = "SELECT id_cidade, cidade FROM cidades WHERE id_estado = ". $_GET['id'] ." ORDER BY cidade ASC;";

//execitando a instrução

$query = mysql_query($instrucao) or die ("Erro");

//inicando a estrutura do json

//a variavel cidade irá receber uma array chamada cidade, com os varias linhas e duas colunas, onde o indice das colunas são respectivamente, id e nome

//cada coluna é separada por uma virgula. Para atribuir um valor ao indice, é necessário por o nome do indice primeiro e depois o conteudo, separados por ":"(dois pontos)

//caso queira por mais de uma coluna deve-se usar virgula.

$cidade = "{'cidade':[";

 

while ($linha = mysql_fetch_assoc($query)){

$qtd_linha +=1;

$cidade .= "{'id':'". $linha['id_cidade'] ."','nome':'". $linha['cidade'] ."'}";

//verificando se já é o ultimo registro

if ($qtd_linha < mysql_num_rows($query)){

//se não for o ultimo registro, coloca-se uma virgula

$cidade .= ",";

}else{

$cidade .= "]}";

}

}

 

echo $cidade;

?>

Infelizmente, o proprietário do site ainda não quer colocar o site no ar, então não terei como postar o link.

 

Agradeço todo tipo de ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

ndecastro    0

ndecastro
Postado

Pessoal, desculpem o incomodo, mas não precisam responder esse tópico, um amigo meu acabou de me ajudar a resolver o problema.

O erro estava acontecendo porque tem nomes com aspa simples, mas isso é fácil de resolver.

 

Só uma pergunta, alguém sabe como excluir um tópico?

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