Combo box 3 niveis com MySQL

[Everton Ferreira 0]

Galera, preciso popular 3 níveis de ComboBox pelo bando de dados, são eles:

 

Área, País e Curso

 

O select funciona perfeito até o segundo nível, mas no terceiro dá erro,

 

peguei um modelo pronto com 2 níveis e adaptei, funcionou perfeito, mas não consegui criar o terceiro, visto que tenho que armazenar o valor do segundo select, comparar e listar os valores do terceiro ComboBox

 

o código tem Ajax, linguagem que não domino e estou aprendendo PHP com MySQL da mão mesmo, mas já estou a 2 dias nesse código e não saio do lugar, rs

 

Quem puder me ajudar, dá uma força:

 

os códigos são:

 

 

INDEX.PHP:

<?php
$con = mysql_connect( 'localhost', 'everton', 'SbhJZCGP37bdTavV' ) ;
mysql_select_db( 'profissionalizante', $con );
?>
<label for="cod_area">Area:</label>
<select name="cod_area" id="cod_area">
<option value=""></option>
<?php
$sql = "SELECT cod_area, nome
FROM area
ORDER BY nome";
$res = mysql_query( $sql );
while ( $row = mysql_fetch_assoc( $res ) ) {
echo '<option value="'.$row['cod_area'].'">'.(utf8_encode($row['nome'])).'</option>';
}
?>
</select>
 
<label for="pais">País:</label>
<span class="carregando">Aguarde, carregando...</span>
<select name="pais" id="pais">
<option value="">-- Escolha uma pais --</option>
 
 
<script src="[url=http://www.google.com/jsapi]http://www.google.com/jsapi [/url]"></script>
<script type="text/javascript">
 google.load('jquery', '1.3');
</script>
 
<script type="text/javascript">
$(function(){
$('#cod_area').change(function(){
if( $(this).val() ) {
$('#pais').hide();
$('.carregando').show();
$.getJSON('paises.ajax.php?search=',{cod_area: $(this).val(), ajax: 'true'}, function(j){
var options = '<option value=""></option>';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].pais + '">' + j[i].nome + '</option>';
}
$('#pais').html(options).show();
$('.carregando').hide();
});
} else {
$('#pais').html('<option value="">– Escolha uma area –</option>');
}
});
});
</script>
                    </select>
                    
                    <label for="curso">Curso:</label>
<span class="carregando">Aguarde, carregando...</span>
<select name="curso" id="curso">
<option value="">-- Escolha uma curso --</option>
 
 
 
 
<script type="text/javascript">
$(function(){
$('#pais').change(function(){
if( $(this).val() ) {
$('#curso').hide();
$('.carregando').show();
$.getJSON('cursos.ajax.php?search=',{pais: $(this).val(), ajax: 'true'}, function(j){
var options = '<option value=""></option>';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].cod_curso + '">' + j[i].nome + '</option>';
}
$('#pais').html(options).show();
$('.carregando').hide();
});
} else {
$('#curso').html('<option value="">– Escolha uma area –</option>');
}
});
});
</script>
                </select>

 

 

 

PAISES.AJAX.PHP

<?php
header( 'Cache-Control: no-cache' );
header( 'Content-type: application/xml; charset="utf-8"', true );
 
$con = mysql_connect( 'localhost', 'everton', 'SbhJZCGP37bdTavV' ) ;
mysql_select_db( 'profissionalizante', $con );
 
$cod_area = mysql_real_escape_string( $_REQUEST['cod_area'] );
 
$pais = array();
 
$sql = "SELECT pais, cod_area
FROM paisxarea
WHERE cod_area=$cod_area";
$res = mysql_query( $sql );
while ( $row = mysql_fetch_assoc( $res ) ) {
$pais[] = array(
'pais' => (utf8_encode($row['pais'])),
'nome' => (utf8_encode($row['pais'])),
);
}
 
echo( json_encode( $pais ) );

 

 

CURSOS.AJAX.PHP

<?php
header( 'Cache-Control: no-cache' );
header( 'Content-type: application/xml; charset="utf-8"', true );
 
$con = mysql_connect( 'localhost', 'everton', 'SbhJZCGP37bdTavV' ) ;
mysql_select_db( 'profissionalizante', $con );
 
$pais = mysql_real_escape_string( $_REQUEST['pais'] );
 
$cod_curso = array();
 
$sql = "SELECT pais, cod_area, nome, cod_curso
FROM curso
WHERE pais=$pais";
$res = mysql_query( $sql );
while ( $row = mysql_fetch_assoc( $res ) ) {
$pais[] = array(
'cod_curso' => (utf8_encode($row['cod_curso'])),
'nome' => (utf8_encode($row['nome'])),
);
}
 
echo( json_encode( $cod_curso ) );

[Lucas Guima 164]

O que é um combobox com três níveis?

[Everton Ferreira 0]

na verdade são 3 ComboBox,

a lista criada pelo pelo segundo depende do valor do primeiro

e a lista criada pelo terceiro depende do valor do segundo,

 

igual aquele velho e clássico exemplo de um formulário com, Estado, Cidade e Bairro

[masi 22]

Aparece algum erro? seu erro log está ativo? Posta o que acontece quando você usa o terceiro box.

[Everton Ferreira 0]

Na primeira imagem, quando escolho a área o filtro funciona perfeito, de acordo com o bando de dados e carrega a lista de países para a área escolhida

 

Na segunda imagem, escolho o pais e ele aparece carregando e não sai dessa tela...

[Gabriel Lyra 0]

A melhor forma de fazer isso é com JavaScript mesmo.

Você tem jQuery nesse seu projeto? Ele vai ajudar bastante.

 

No meu caso estou utilizando JSP ou seja JAVA mas a ideia é a mesma.

Vamos fazer com um exemplo básico: Estado e Cidades.

Primeiramente, devemos carregar todos os estados:

 

<select id="estado" name="estado">//Populando o select suponho que você ja o tenha feito
	<c:forEach items="${estadoList}" var="e">
		<option value="${e.uf}">${e.name}</option>
	</c:forEach>
</select>
<select id="cidade" name="cidade">
</select>
<!--// coloca a url onde vamos buscar as cidades em uma variável aqui -->
<script>
	var urlCidades = '<c:url value="/ajax/cidades/" />';
</script>

Depois, precisamos dizer ao jQuery que queremos buscar as cidades quando a combobox de estado sofrer alterações:
DICA : Coloque o JavaScript sempre em um arquivo separado.

 

$('#estado').on('change', function(){
	var ufSelecionada = $(this).val();
	$.ajax({
		url: urlCidades,//Aqui voce usa a var crianda antes ou o link do seu retorno Json
		data: {uf:ufSelecionada},
		type : 'get',
		dataType: 'json',
		success : function(cidades) {
			$('#cidade').empty(); // Precisa limpar a combo antes.
			// no java vc faz cidades.get(0).getName() e cidades.get(0).getId(),
			// Com JSON vc vai fazer cidades[0].name e cidades[0].id
			for (var i = 0; i < cidades.length; i++){
				$('#cidade').append('<option value="' + cidades[i].id + '">' + cidades[i].name + '</option>');
			}
		}
	});
});

Depois, precisamos criar a action que vai carregar as cidades baseado no estado que foi selecionado

para isso faça um metodo get recebendo o estado selecionado e retornar o json nesse formato:

 

[
{id: 1, name: 'Vitoria'}
]

Espero ter ajudado, qualquer dúvida, é só perguntar.