Combobox de Estados com Ajax

[Belloto 0]

Olá a todos, este é o meu primeiro tópico aqui no Imasters e espero que vocês gostem...

 

Desenvolvi um script que voce seleciona o estado e eles tras todas as cidades deste estado, e tem a possibilidade de transferir as cidades escolhidas para um outro select..

 

Scripts

 

 

//envia.php

<?php

/*
*************************************
Página:			cidades.php
Desenvolvido por: 		Gustavo
Projeto:			Ajax Estados
Versão:			1.0
Data de Início:		21/07/2008
**************************************
*/ 

include "arquivo de conexao com banco de dados";

$texto = $_REQUEST["login"];
$strEmail = "SELECT `municipio` FROM `cidades` WHERE `uf` = '". $texto ."'";
$sqlEmail = mysql_query( $strEmail ) or die ( mysql_error() );
$totEmail = mysql_num_rows( $sqlEmail );
while( $resEmail = mysql_fetch_array($sqlEmail)){
	$str_retorno .= tirar_acentos($resEmail[0]).';';
}
echo $str_retorno;
?>

//ajax_cidades2.js

/*
*************************************
Página:			ajax_cidades2.js
Desenvolvido por: 		Gustavo
Projeto:			Ajax Estados
Versão:			1.0
Data de Início:		21/07/2008
**************************************
*/

function ajax() {
};
ajax.prototype.iniciar = function() {

	try{
		this.xmlhttp = new XMLHttpRequest();
	}catch(ee){
		try{
			this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			try{
				this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}catch(E){
				this.xmlhttp = false;
			}
		}
	}
	return true;
}

ajax.prototype.ocupado = function() {
	estadoAtual = this.xmlhttp.readyState;
	return (estadoAtual && (estadoAtual < 4));
}

ajax.prototype.processa = function() {
	if (this.xmlhttp.readyState == 4 && this.xmlhttp.status == 200) {
		return true;
	}
}

ajax.prototype.enviar = function(url, metodo, modo) {
	if (!this.xmlhttp) {
		this.iniciar();
	}
	if (!this.ocupado()) {
		if(metodo == "GET") {
			this.xmlhttp.open("GET", url, modo);
			this.xmlhttp.send(null);
		} else {		
			this.xmlhttp.open("POST", url, modo);
			this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
			this.xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
			this.xmlhttp.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
			this.xmlhttp.setRequestHeader("Pragma", "no-cache");
			this.xmlhttp.send(url);
		}	

		if (this.processa) {
			return unescape(this.xmlhttp.responseText.replace(/\+/g," "));
		}
	}
	return false;
}

function envia(url, metodo, modo)
{
	var login = document.getElementById('formCep').uf_pracas.value;
	remoto  = new ajax();
	xmlhttp = remoto.enviar(url + "?login=" + login, metodo, modo );
	var todas = xmlhttp.split(";"); 
	var tamanho = todas.length;
	tamanho--;
	
	var i;
	var meu_select =document.getElementById("sel_cidades");
	var tam = meu_select.length;
	var options = meu_select.getElementsByTagName("option");
	
	if( tam > 0 ){
		for( i = 0; i <= tam; i++ ){
			meu_select.remove(tam-i);
		}
	}
	for( i = 0; i < tamanho; i++ ){
		
		var y=document.createElement('option'); //cria um novo elemento option
		y.text=todas[i]; //seta o texto do elemento option
		y.value=todas[i]; //seta o valor do elemento option
		y.name='cid'+i; //seta o valor do elemento option
		y.id='cid'+i; //seta o valor do elemento option
		try
		{
			meu_select.add(y,null); // adiciona um novo option no fim da lista para navegadores complacentes
		}
			catch(ex)
		{
			meu_select.add(y); // adiciona um novo option no fim da lista para o IE
		}
	  //document.getElementById("cid"+i).innerHTML = todas[i];
	}
	document.getElementById('removeItem').disabled = true;
	document.getElementById('insereItem').disabled = true;
}

//form.php

<?

/*
*************************************
Página:			form.php
Desenvolvido por: 		Gustavo
Projeto:			Ajax Estados
Versão:			1.0
Data de Início:		21/07/2008
**************************************
*/

$estados = array('AC','AL','AP','AM','BA','CE','DF','GO','ES','MA','MT','MS','MG','PA','PB','PR','PE','PI','RJ','RN','RS','RO','RR','SP','SC','SE','TO');
?>
<script language='javascript'>
function addItem(){

	/* ****************Para conferir se o nome já está na lista*************** */
	var sel2 =document.getElementById("cidades2");
	var tam_sel2 = sel2.length;
	//alert(tam_sel2);
	var valorItem;
	/* *********************************************************** */



	var sel = document.getElementById('sel_cidades');
	//Pega o índice do ítem (option) selecionado. O primeiro option é o 0 (zero).
	var selecionado = sel.selectedIndex;

		var cid_valor = document.getElementById('cid'+selecionado).value;
		
		for( i = 0; i< tam_sel2; i++ ){
			valorItem = document.getElementById('cidade'+i).value;
			if( valorItem == cid_valor ){
			  var existente = 'true';
			}
		}	
		if( existente != 'true'){
			var meu_select2 =document.getElementById("cidades2");
			var option2=document.createElement('option'); //cria um novo elemento option
			option2.text=cid_valor; //seta o texto do elemento option
			option2.value=cid_valor; //seta o valor do elemento option
			option2.name='cidade'+selecionado; //seta o valor do elemento option
			option2.id='cidade'+tam_sel2; //seta o valor do elemento option
			
			try{
			  meu_select2.add(option2,null); // adiciona um novo option no fim da lista para navegadores complacentes
			}catch(ex){
			  meu_select2.add(option2); // adiciona um novo option no fim da lista para o IE
			}
			var v_anterior = document.getElementById('locais_coleta').value;
			var v_novo = v_anterior + cid_valor+';';
			document.getElementById('locais_coleta').value = v_novo;
		}else{
			window.alert('Você já adicionou esta cidade!!');
		}
	
}
function excluiItem(){
	var meu_select3 =document.getElementById("cidades2");
	var tam = meu_select3.length;
	if( tam > 0 ){
	  var selecionado2 = meu_select3.selectedIndex;
	 
	  /* ***************Para retirar do campo hidden o valor excluido**************** */
	  var valor_retirado = document.forms[0].cidades2.value;
	  var v_anterior = document.getElementById('locais_coleta').value;
	  v_anterior = replaceAll(v_anterior, valor_retirado+";", "");
	  document.getElementById('locais_coleta').value = v_anterior;
	  /* *************************************************************** */
	  
	  meu_select3.remove(selecionado2);
	}
}
function habilita_insere(){
	document.getElementById('insereItem').disabled = false;
}
function habilita_remove(){
	document.getElementById('removeItem').disabled = false;
}

function replaceAll(str, de, para){
	var pos = str.indexOf(de);
	while (pos > -1){
		str = str.replace(de, para);
		pos = str.indexOf(de);
	}
	return (str);
}
function tirafundo(elemento){
	document.getElementById(elemento).style.backgroundColor = "#FFFFFF";
}

function avanca_campo(max, elemento, proximo){
   var tamanho = elemento.value.length;
  if( tamanho == max){
	document.getElementById(proximo).focus();
  }
}
</script>
<script src="ajax_cidades2.js" type="text/javascript"></script>
<div align='center'>
<form name='formCep' action='' method='POST'>
  <table style='width:200px; height: 200px;' border='2' cellspacing='0' cellpadding='0'>
	<tr>
	  <td  vAlign='top' height='' align='center'>
		<table border='2' cellpadding='0' cellspacing='0' width='50%'>
		  <tr>
			<td colspan='3' align='center'>
			  <select name='uf_pracas' id='uf_pracas' class='frmbox' onchange="tirafundo(this.id); envia('cidades.php', 'POST', false);">
				<option></option>
				<?foreach($estados as $v1){?>
				<option value='<? echo $v1; ?>'><? echo $v1; ?></option>
				<?}?>
			  </select>
			</td>
		  </tr>		
		  <tr>
			<td>
			  <select name='sel_cidades' id='sel_cidades' size='7' style='width: 150px;' onchange='habilita_insere();' multiple></select>
			</td>
			<td>
			  <input type='button' value='+' name='insere' id='insereItem' class='frmbox' style='width: 30px;' onclick='addItem();' disabled='true' ><br />
			  <input type='button' value='-' name='remove' id='removeItem' class='frmbox' style='width: 30px;' onclick='excluiItem();' disabled='true' ><br />
			</td>
			<td>
			  <input type='hidden' name='locais_coleta' id='locais_coleta' value='' />
			  <select name='cidades2' id='cidades2' size='7'  style='width: 150px;' onchange='habilita_remove();' multiple></select>
			</td>
		  </tr>		
		</table>
	  </td>
	</tr>	
	<tr height='30px'>
	  <td align='center' colspan='2'>
		<input type='button' value='Voltar' id='' name=''  style='width: 70px;'>  
		<input type='submit' value='Gravar' id='' name=''  style='width: 70px;'>
	  </td>
	</tr>
  </table>
</form>
</div>

[Belloto 0]

Não postei o banco por que ele é gigantesco ( tem todas as cidades do Brasil ), mas a estrutura MySql é essa:

 

 

 

CREATE TABLE `cidades` (

`id` int(5) NOT NULL,

`uf` varchar(2) NOT NULL,

`municipio` varchar(200) NOT NULL,

PRIMARY KEY (`id`)

)

[andreia_sp 1]

Primeiro bem vindo Belloto \o/

E valeu pela contribuição, estou movendo seu topico para a area mais apropriada.