Ir para conteúdo

Arquivado

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

MarcelSt

2 Combos - Ajax - Customizável

Por , em Javascript

Recommended Posts

MarcelSt    0

MarcelSt
Postado

"Criei" (entre aspas pq peguei umas partes prontas) um script de preenchimento de 2 combos... de fácil aplicação.. basta editar os valores no arquivo xml.php e deu pra bola...

 

EXEMPLO

 

abaixo os códigos

 

index.php

<?
include(”xml.php”);

?>
<script type=”text/javascript” src=”combo.js”></script>
<body onLoad=”Dados(document.getElementById(’select1′).value);”>
<?
$sql = “SELECT * FROM $tb1_nome”;
$sql = mysql_query($sql);
$row = mysql_num_rows($sql);
?>
<form>
<select name=”select1″ id=”select1″ onChange=”Dados(this.value);”>
<? for($i=0; $i<$row; $i++) { ?>
<option value=”<? echo mysql_result($sql, $i, $tb1_valor); ?>”>
<? echo mysql_result($sql, $i, $tb1_desc); ?></option>
<? } ?>
</select><br>

<select name=”select2″ id=”select2″>
<option id=”opcoes” value=”0″>Selecione a categoria</option>
</select>
</form>

xml.php (este arquivo é o único que precisa ser editado)

<?

############## EDITAR #######################

$bd_host = 'localhost'; // host... 99,9% de chance de ser localhost..
$bd_name = 'bd'; //nome do banco de dados
$bd_user = 'root'; //nome do usuário
$bd_pass = 'senha'; //senha do usuário

$tb1_nome = 'tabela1'; //nome da tabela que contém os valores do select 1
$tb1_valor = 'valor'; //campo da tabela que ficará no 'value' do option
$tb1_desc = 'nome'; //campo da tabela que ficará na descrição do option... a parte visível


$tb2_nome = 'tabela2'; //nome da tabela que contém os valores do select 2
$tb2_valor = 'valor'; //campo da tabela que ficará no 'value' do option
$tb2_desc = 'nome'; //campo da tabela que ficará na descrição do option... a parte visível
$tb2_comp = 'tipo'; //campo da tabela 2 para comparação com o value da select 1... 'WHERE' $tb_comp =

###############################################

$connection = @mysql_connect($bd_host, $bd_user, $bd_pass) or die("Unable to connect to database!");
@mysql_select_db($bd_name, $connection) or die("Unable to select database!");
	

$sql = " SELECT * FROM $tb2_nome WHERE $tb2_comp = '$_POST[vsel1]' ";			
$sql = mysql_query($sql);	   
$row = mysql_num_rows($sql);	

if($row) {				
   $xml  = "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n";
   $xml .= "<cidades>\n";			   
   for($i=0; $i<$row; $i++) {  
	  $codigo	= mysql_result($sql, $i, $tb2_valor); 
	  $descricao = mysql_result($sql, $i, $tb2_desc);
	  $xml .= "<cidade>\n";	 
	  $xml .= "<codigo>".$codigo."</codigo>\n";				  
	  $xml .= "<descricao>".ucfirst(strtolower($descricao))."</descricao>\n";		 
	  $xml .= "</cidade>\n";	
   }		   
   $xml.= "</cidades>\n";
   Header("Content-type: application/xml; charset=iso-8859-1"); 
}											   
  
echo $xml;		 
?>

combo.js

function Dados(valor) {
	  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;
			}
		 }
	  }
	  if(ajax) {
		 document.forms[0].select2.options.length = 1;
		 
		 idOpcao  = document.getElementById("opcoes");
		 
		 ajax.open("POST", "xml.php", true);
		 ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		 
		 ajax.onreadystatechange = function() {
			if(ajax.readyState == 1) {
			   idOpcao.innerHTML = "Carregando...";
			}
			if(ajax.readyState == 4 ) {
			   if(ajax.responseXML) {
				  processXML(ajax.responseXML);
			   }
			   else {
				   idOpcao.innerHTML = "Selecione";
			   }
			}
		 }
		 var params = "vsel1="+valor;
		 ajax.send(params);
	  }
   }
   
   function processXML(obj){
	  var dataArray   = obj.getElementsByTagName("cidade");
	  
	  if(dataArray.length > 0) {
				   document.forms[0].select2.options.length = 0;
		 for(var i = 0; i < dataArray.length; i++) {
			var item = dataArray[i];
			var codigo	=  item.getElementsByTagName("codigo")[0].firstChild.nodeValue;
			var descricao =  item.getElementsByTagName("descricao")[0].firstChild.nodeValue;
			

			var novo = document.createElement("option");
				novo.setAttribute("id", "opcoes");
				novo.value = codigo;
				novo.text  = descricao;
				document.forms[0].select2.options.add(novo);
		 }
	  }
	  else {
		idOpcao.innerHTML = "Selecione";
	  }	  
   }

tá na mão... idéias? postem!

 

 

Postado originalmente no meu blog com download do código disponível

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