Ir para conteúdo

Arquivado

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

William Bruno

Combos dependentes AJAX-jQuery

Por , em Javascript

Recommended Posts

William Bruno    1501

William Bruno
Postado

Boas galera!

 

Fiz aqui um exemplo do que eu mesmo já procurei muito por ai.

Sou péssimo para explicações, então lá vão os códigos.

 

Embaixo no script php, eu comentei as linhas caso queira usar a biblioteca mysql, em vez da mysqli(prefira o i, caso MySQL > 4.1)

index.php

<html>
<head>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){//inicio o jQuery
		$("select[name='combo1']").change(function(){
		var idCombo1 = $(this).val();//pegando o value do option selecionado
		//alert(idCombo1);//apenas para debugar a variável
		
			$.getJSON(//esse método do jQuery, só envia GET
				'function.inc.php',//script server-side que deverá retornar um objeto jSON
				{idCombo1: idCombo1},//enviando a variável

				function(data){
				//alert(data);//apenas para debugar a variável
					
					var option = new Array();//resetando a variável
					
					resetaCombo('combo2');//resetando o combo
					$.each(data, function(i, obj){
						
						option[i] = document.createElement('option');//criando o option
						$( option[i] ).attr( {value : obj.id} );//colocando o value no option
						$( option[i] ).append( obj.nome );//colocando o 'label'

						$("select[name='combo2']").append( option[i] );//jogando um à um os options no próximo combo
				});
			});
		});
	});	
	
	/* função pronta para ser reaproveitada, caso queira adicionar mais combos dependentes */
	function resetaCombo( el )
	{
		$("select[name='"+el+"']").empty();//retira os elementos antigos
		var option = document.createElement('option');					
		$( option ).attr( {value : '0'} );
		$( option ).append( 'Escolha' );
		$("select[name='"+el+"']").append( option );
	}
	</script>
</head>
<body>
<form action="" method="post">
	<fieldset>
		<label><select name="combo1">
			<option value="0">Escolha</option>
			<option value="1">Item 1</option>
			<option value="2">Item 2</option>
			<option value="3">Item 3</option>
		</select></label>
		
		<label><select name="combo2">
			<option value="0">Escolha</option>
		</select></label>
	</fieldset>
</form>
</body>
</html>
function.inc.php

<?php
	header("Content-Type: text/html; charset=ISO-8859-1");

	function intGet( $campo ){
		return isset( $_GET[$campo] ) ? (int)$_GET[$campo] : 0;
	}	
	function retorno( $id )
	{
		$sql = "SELECT `id`, `nome` 
			FROM `combo2` 
			WHERE `idCombo1` = {$id} ";
		$sql .= "ORDER BY `nome` ";
		
		
		$mysqli = new mysqli("localhost", "root", "123", "ajax");
		//$con = mysql_connect('localhost', 'root', '123');
		//mysql_select_db( 'ajax', $con );
		
		
		$q = $mysqli->query( $sql ); 
		//$q = mysql_query( $sql );
		
		
		$json = ' [';
		if( $q->num_rows > 0 )
		//if( mysql_num_rows( $q ) > 0 )
		{
			while( $dados = $q->fetch_object() )
			//while( $dados = mysql_fetch_assoc( $q ) )
			{
				$json .= '{"nome'.$campo.'":"'.$dados->nome.'","id'.$campo.'":"'.$dados->id.'"}, ';
				//$json .= '{"nome'.$campo.'":"'.$dados['nome'].'","id'.$campo.'":"'.$dados['id'].'"}, ';
			}
		}
		else
			$json .= '{"nome'.$campo.'": "Não Encontrado"}';
			
		$json .= ']';
		
		return $json;
	}
	
	echo retorno( intGet('idCombo1') );
Uma forma simples de debugar, é acessando diretamente:

http://localhost/combo/function.inc.php?idCombo1=2

 

sql.sql

-- phpMyAdmin SQL Dump
-- version 3.1.2
-- http://www.phpmyadmin.net
--
-- Servidor: localhost
-- Tempo de Geração: Out 06, 2009 as 07:13 AM
-- Versão do Servidor: 5.1.38
-- Versão do PHP: 5.2.8

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- Banco de Dados: `ajax`
--

-- --------------------------------------------------------

--
-- Estrutura da tabela `combo1`
--

CREATE TABLE IF NOT EXISTS `combo1` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nome` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Extraindo dados da tabela `combo1`
--

INSERT INTO `combo1` (`id`, `nome`) VALUES
(1, 'Item 1'),
(2, 'Item 2');

-- --------------------------------------------------------

--
-- Estrutura da tabela `combo2`
--

CREATE TABLE IF NOT EXISTS `combo2` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `idCombo1` int(11) NOT NULL,
  `nome` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

--
-- Extraindo dados da tabela `combo2`
--

INSERT INTO `combo2` (`id`, `idCombo1`, `nome`) VALUES
(1, 1, '1° Item do Combo1'),
(2, 1, '2° Item do Combo1'),
(3, 2, '1° Item do Combo1'),
(4, 2, '2° Item do Combo1'),
(5, 2, '3° Item do Combo1'),
(6, 3, '1° Item do Combo1');

No meu caso, fiz essa pasta 'combo', só para organizar as coisas por aqui.

Compartilhar este post

Link para o post
Compartilhar em outros sites

CleberMartins    0

CleberMartins
Postado

Ola William...

 

Muito bom isso, já me ajudou muito no meu trabalho.... só uma duvida... como faço para usar com um banco oracle?... como faço a conexão?... você pode me ajudar?

 

Muito obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Cara, ai a dúvida já é php, e não mais javascript.. dá uma olhada no manual:

http://www.php.net/oci_connect

 

 

se ainda tiver dúvidas, crie um tópico na seção de php.

Compartilhar este post

Link para o post
Compartilhar em outros sites

eric2000    0

eric2000
Postado

Tava testando esse código agora e acho que descobri um pequeno bug: se você escolhe algum dos ítens e depois volta pra opção Escolha no primeiro combo o segundo vai mostrar "Não Encontrado" nas opções. Acho que faltou tratar esse erro. No mais tá muito funcional, parabéns!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

não é bem um 'bug', é só algo que não implementei... mas é bem simples resolver..

 

coloque antes do getJSON

if( idCombo1=='0' )
				return resetaCombo('combo2');
e pronto ^_^

Compartilhar este post

Link para o post
Compartilhar em outros sites

paginad    0

paginad
Postado

O que eu preciso é quase o que está feito ai no exemplo, porém preciso que o conteúdo esteja dentro de uma DIV e não dentro de um combo.

 

E principalmente a maior necessidade é ter mais de uma div cada uma dependente de outro conteúdo, veja só.

 

Preciso trazer todas as marcas, modelos e cores de roupas. Então preciso que o conteúdo que está em Json, esteja assim.

 

Marcas -> Modelos -> Cores.

 

Tipo:

 

MOfficer

-- Calças

---- Preta

Zoomp

-- Blusa

---- Vermelha

 

Resumindo, seria como se tivesse 3 combos, um depende do resultado do outro.

 

Como eu faço isso?

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