[Resolvido] Como criar 3 select option com MySql

Antonio428 · Julho 26, 2010

Estou criando uma pagina de cadastro mas tive o seguinte problema:

Criei 3 select option sendo que o terceiro depende do segundo e o segundo do primeiro.

No codigo que vou postar aqui temos 3 options

1º Condomínio

2º Bloco

3º Predio

Meu grande problema é que o segundo campo só poderia trazer as os dados com a informação do primeiro e o terceiro seria um wehere com o cod do 1º mais o 2º

      <td width="125"><div align="right">Condominio:</div></td>
      <td width="218"><div align="left">
          <select name="empresa" class="texto" id="empresa">
            <?php
require("string.php");
$sql=("$mysql_emp");
$result=mysql_query($sql);
$resp=mysql_num_rows($result);
$i=-1;  
while($i < $resp){
$empresa=mysql_result($result,$i,"emp_nome");
$cod_emp=mysql_result($result,$i,"emp_cod");
echo $empresa; 
?>
            <option value="<?php echo $cod_emp;?>"><?php echo $empresa;?></option>
            <?php $i++;}?>
          </select>
      </div></td>
    </tr>
    <tr>
      <td><div align="right">Bloco:</div></td>
      <td><div align="left">
          <select name="bloco" class="texto" id="bloco">
            <?php
			
require("string.php");
$sql=("$mysql_bloco");			
$result=mysql_query($sql);
$resp=mysql_num_rows($result);
$i=-1;  
while($i < $resp){
$codbloco=mysql_result($result,$i,"blo_codbloco");
$blo_nome=mysql_result($result,$i,"blo_nome");
echo $blo_nome; 
?>
            <option value="<?php echo $codbloco; ?>"><?php echo $blo_nome; ?> </option>
            <?php $i++;}?>
          </select>
      </div></td>
    </tr>
    <tr>
      <td><div align="right">Predio:</div></td>
      <td><div align="left">
          <select name="predio" class="texto" id="predio">
            <?php
require("string.php");
$sql=("$mysql_predio");
				//where emp.Emp_Cod ='$cod_emp'");
$result=mysql_query($sql);
$resp=mysql_num_rows($result);
$i=-1;  
while($i < $resp){
$pre_cod=mysql_result($result,$i,"pre_cod");
$pre_nome=mysql_result($result,$i,"pre_nome");
echo $pre_nome; 
?>
            <option value="<?php echo $pre_cod; ?>"><?php echo $pre_nome; ?></option>
            <?php $i++;}?>
	    <?php     mysql_close(); ?>
          </select>
      </div></td>

Desde já agradeço a atenção.

Rogério Y. · Julho 27, 2010

Não está muito bem comentado mas a idéia é mais ou menos essa... só que lugar desse IFs que eu coloquei no começo, você poe suas querys...

qq dúvida posta ai...


<?php

if( $_POST['select1'] ){
    
    $ret = null;
    
    if( $_POST['select1'] == 1){
        $ret[0]['value'] = 'a';
        $ret[0]['descricao'] = 'Bloco A';
        $ret[1]['value'] = 'b';
        $ret[1]['descricao'] = 'Bloco B';
    }elseif( $_POST['select1'] == 2 ){
        $ret[2]['value'] = 'c';
        $ret[2]['descricao'] = 'Bloco C';
        $ret[3]['value'] = 'D';
        $ret[3]['descricao'] = 'Bloco D';
    }
    
    die( json_encode( $ret ) );
    
}

if( $_POST['select2'] ){
    
    $ret = null;
    
    switch( $_POST['select2'] ){
        case 'a':
            $ret[0]['value'] = '10';
            $ret[0]['descricao'] = 'Apto 10';
            $ret[1]['value'] = '20';
            $ret[1]['descricao'] = 'Apto 20';
            break;
            
        case 'b':
            $ret[0]['value'] = '30';
            $ret[0]['descricao'] = 'Apto 30';
            $ret[1]['value'] = '40';
            $ret[1]['descricao'] = 'Apto 40';
            break;
            
        case 'c':
            $ret[0]['value'] = '50';
            $ret[0]['descricao'] = 'Apto 50';
            $ret[1]['value'] = '60';
            $ret[1]['descricao'] = 'Apto 60';
            break;
            
        case 'd':
            $ret[0]['value'] = '70';
            $ret[0]['descricao'] = 'Apto 70';
            $ret[1]['value'] = '80';
            $ret[1]['descricao'] = 'Apto 80';
            break;
    }
    
    die( json_encode( $ret ) );
    
}



?><!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <title>Exemplo Imasters</title>
    </head>
    <body>
        
        <select id="select1">
            <option value="">--------</option>
            <option value="1">Condomínio 1</option>
            <option value="2">Condomínio 2</option>
        </select>
        
        <select id="select2">
            <option value="">--------</option>
        </select>
        
        <select id="select3">
            <option value="">--------</option>
        </select>
        
        <script type="text/javascript">
            $(document).ready(function(){
                
                function limpar( limpo ){
                    limpo.find('option')
                        .remove()
                        .end()
                        .append('<option value="">--------</option>')
                        .val('');
                }
                
                var s1 = $('#select1');
                var s2 = $('#select2');
                var s3 = $('#select3');
                
                s1.change(function(){
                    
                    limpar(s2);
                    limpar(s3);
                    
                    $.ajax({
                        url: String(document.location),
                        type: 'post',
                        data: {'select1': s1.val()},
                        dataType: 'json',
                        success: function(retorno){
                            for(var i in retorno){
                                s2.append('<option value=' + retorno[i]['value'] + '>' + retorno[i]['descricao'] + '</option>');
                            }
                        } 
                    });
                });
                
                s2.change(function(){
                    
                    limpar(s3);
                    
                    $.ajax({
                        url: String(document.location),
                        type: 'post',
                        data: {'select2': s2.val()},
                        dataType: 'json',
                        success: function(retorno){
                            for(var i in retorno){
                                s3.append('<option value=' + retorno[i]['value'] + '>' + retorno[i]['descricao'] + '</option>');
                            }
                        } 
                    });
                });
                
            });
        </script>
    </body>
</html>

Antonio428 · Julho 27, 2010

então o problema é que quando eu abrir a tela ele ja vai executar todas as querys e carregar os lists

ai eu precisava de uma function ou de alguma coisa que so iria executar a segunda query se o cara selecionasse algo na primeira

e executaria a terceira quando a 1ª e a 2ª list estivesse preenchidas e depois se o cara desmarcasse a 1º opção os outros iriam ficar em branco tambem.

AmareshinO · Julho 27, 2010

Amigo, você sabe um pouco sobre ajax??? eu aconselharia você a usar!

vamos falar que seus selects sao esses:

<select id="select_1" name="aaaa">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select id="select_2" name="bbbb"></select>
<select id="select_3" name="cccc"></select>

Monte um arquivo "query.php" e no code faça um Switch para algum valor GET para alterar entre as querys, este valor GET voce passa ele pelo AJAX!

EX:

<?
$passo = $_GET[passo];

if (isset($passo)) {
    switch ($passo) {
        case 1:
            $retorno = mysql_query('select * from tabela_1');
            // resto do seu código
            echo json_encode($resultado); // aque eu retorno para o AJAX o resultado ($resultado deve ser uma array depois do fetch ter sido aplicado no retorno da query) em JSON
            break;
        case 2:
            $retorno = mysql_query('select * from tabela_2');
            // resto do seu código
            echo json_encode($resultado);
            break;
        case 3:
            $retorno = mysql_query('select * from tabela_3');
            // resto do seu código
            echo json_encode($resultado);
            break;
    }
}
?>

este arquivo vai executar a query e (talvez) trazer algum retorno.... agora entra o ajax (nescessita conhecimento basico na linguagem), eu uso o jQuery para fazer meus scripts ajax... axo que eh uma linguagem muito simples, funcional e etc!

vamos ao código, agora voce precisa fazer com que quando o usuário altere alguma coisa na página, rode o ajax passando o valor $passo em GET para ele!

EX:

<script type="text/javascript">
    function query(passo) {
        $.getJSON('query.php?passo='+passo, function(retorno){
            var options = '<option value="">Selecione</option>';
            for (var i = 0; i < retorno.length; i++) {
                options += '<option value="' + retorno[i].valor+ '">' + retorno[i].resultado + '</option>';
            }
            $('#select_'+passo).html(options)
        });
    }
</script>

Agora é so por os onchange="" nos selects!

EX:

<select id="select_1" name="aaaa" onchange="return query(2);">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select id="select_2" name="bbbb" onchange="return query(3);"></select>
<select id="select_3" name="cccc"></select>

qualquer duvida ou erro, poste aew!!! abraços!

Antonio428 · Julho 28, 2010

a cara eu devo ser muito burro!!! to quebrando a cabeça com isso a uns 2 dias... o pessoal ai no forum ajudando e eu não consigo fazer isso roda

fiz uma pagina separada so para testar o codigo que você me mandou

fiz o seguinte:

na pagina aonde vai ficar o html esta assim

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<script type="text/javascript">
    function query(passo) {
        $.getJSON('query.php?passo='+passo, function(retorno){
            var options = '<option value="">Selecione</option>';
            for (var i = 0; i < retorno.length; i++) {
                options += '<option value="' + retorno[i].valor+ '">' + retorno[i].resultado + '</option>';
            }
            $('#select_'+passo).html(options)
        });
    }
</script>
<select id="select_1" name="select_1" onchange="return query(1);">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select id="select_2" name="select_2" onchange="return query(2);"></select>
<select id="select_3" name="select_3" onchange="return query(3);"></select>

</body>
</html>

pelo o que eu entendi na function iria criar o select e preencher o select criando os options de acordo com os dados do banco.. (muito bom)

mas com o codigo do jeito que eu deixei aqui não me trouxe nada do banco...

pagina de query fiz isso:

<?php
// ================================select==================//

require ("string.php");

$mysql_emp ="select emp_cod,emp_nome from tbl_empresa order by emp_nome";

$mysql_bloco = "select bloc.blo_codbloco,bloc.blo_nome from tbl_empresa emp	inner join tbl_bloco bloc on bloc.blo_CodEmpresa = emp.Emp_Cod where blo_codbloco = ',$cod_emp,' order by blo_nome";

$mysql_predio ="select emp.emp_cod,emp.emp_nome, bloc.blo_codbloco, bloc.blo_nome, pre.pre_cod, pre.pre_nome 	
from tbl_empresa emp left join tbl_bloco bloc on bloc.blo_CodEmpresa = emp.Emp_Cod 
left join tbl_predio pre on pre.pre_Codbloco = bloc.blo_CodBloco where   emp.emp_cod = ',$cod_emp,' and bloc.blo_codbloco =',$codbloco,'
	order by emp.emp_nome, bloc.blo_nome, pre.pre_nome;";	

//=========================== /select ====================//
$passo = $_GET[passo];

if (isset($passo)) {
    switch ($passo) {
        case 1:
		
			require("string.php"); 
			$retorno = mysql_query('select emp_cod from tbl_empresa order by emp_nome');
			$resultado=mysql_query($retorno);
			$resp=mysql_num_rows($resultado);
			$i=0;  
			while($i < $resp){
			$empresa=mysql_result($resultado,$i,"emp_nome");
			$cod_emp=mysql_result($resultado,$i,"emp_cod");
			$i++;}
            echo json_encode($resultado); // aque eu retorno para o AJAX o resultado ($resultado deve ser uma array depois do fetch ter sido aplicado no retorno da query) em JSON
            break;
			
        case 2:
            require("string.php");  
			$retorno = mysql_query('$mysql_bloco');		
			$resultado=mysql_query($retorno);
			$resp=mysql_num_rows($resultado);
			$i=-1;  
			while($i < $resp){
			$codbloco=mysql_result($resultado,$i,"blo_codbloco");
			$blo_nome=mysql_result($resultado,$i,"blo_nome");
			$i++;}
			echo json_encode($resultado);
            break;
        case 3:
            require("string.php");  
            $retorno = mysql_query('$mysql_predio');
            // resto do seu código
            echo json_encode($resultado);
        break;
    }
}
?>

valeu pela ajuda

William Bruno · Julho 28, 2010

você precisa linkar o fw, se não não consegue usar os metodos dele..

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript">
    function query(passo) {

Antonio428 · Julho 28, 2010

deve haver mas alguma coisa, pq do asicionando essa parte de code ainda não deu

Valew abraço...

Rogério Y. · Julho 28, 2010

então o problema é que quando eu abrir a tela ele ja vai executar todas as querys e carregar os lists

ai eu precisava de uma function ou de alguma coisa que so iria executar a segunda query se o cara selecionasse algo na primeira

e executaria a terceira quando a 1ª e a 2ª list estivesse preenchidas e depois se o cara desmarcasse a 1º opção os outros iriam ficar em branco tambem.

O exemplo que te passei não vai executar todas as queries quando abrir a página... ele vai fazer isso que você está falando....

Vai executar somente a primeira... a segunda só vai ser executada quando a primeira for selecionada... e a terceira só vai ser executar quando a segunda for selecionada... e quando eu mudar a primeira, a segunda e a terceira serão recarregadas...

Teste esse código que te passei...

Antonio428 · Julho 29, 2010

então o problema é que quando eu abrir a tela ele ja vai executar todas as querys e carregar os lists

ai eu precisava de uma function ou de alguma coisa que so iria executar a segunda query se o cara selecionasse algo na primeira

e executaria a terceira quando a 1ª e a 2ª list estivesse preenchidas e depois se o cara desmarcasse a 1º opção os outros iriam ficar em branco tambem.

O exemplo que te passei não vai executar todas as queries quando abrir a página... ele vai fazer isso que você está falando....

Vai executar somente a primeira... a segunda só vai ser executada quando a primeira for selecionada... e a terceira só vai ser executar quando a segunda for selecionada... e quando eu mudar a primeira, a segunda e a terceira serão recarregadas...

Teste esse código que te passei...

então cara na tag <select id="select2"> não esta faltando nada para chamar a função? nada do tipo onchage ou onclick e se tirver como iria ficar

valew pela atenção

Rogério Y. · Julho 29, 2010

então cara na tag <select id="select2"> não esta faltando nada para chamar a função? nada do tipo onchage ou onclick e se tirver como iria ficar

valew pela atenção

Não.

Essa parte do código faz isso:



<script type="text/javascript">


            //Quando o documento for completamente carregado execute:
            $(document).ready(function(){
                
                //Essa função limpa select que eu passar na ver limpo
                function limpar( limpo ){
                    limpo.find('option')
                        .remove()
                        .end()
                        .append('<option value="">--------</option>')
                        .val('');
                }
                
                //Estou atribuindo os endereços dos selects nas vars s1, s2, s3...
                var s1 = $('#select1');
                var s2 = $('#select2');
                var s3 = $('#select3');
                

                //atribuo uma funcão para o evento onChange do s1 (#select1)...
                //Acho que essa era sua dúvida... aqui é o onChange... por isso não tem <select onchange="bla bla bla...
                s1.change(function(){
                    
                    //limpo o select2 e o select 3
                    limpar(s2);
                    limpar(s3);
                    
                    //Envio a requisiçao para o servidor....
                    $.ajax({

                        //Essa linha diz que vou enviar a requisição para essa própria página,
                        //Mas você também poderia fazer algo como:
                        //url: '/meuscript.php',
                        url: String(document.location),

                        //Aqui é o tipo da requisição, que pode ser post ou get
                        type: 'post',

                        //Aqui é a variável que estou passando, no caso o value do select1 (s1.val())
                        data: {'select1': s1.val()},

                        //Aqui defino o tipo de dados... no caso json, mas poderia se html ou text ou outras coisas também...
                        dataType: 'json',

                        //Aqui eu trato o retorno da requisição...
                        //Ou seja, o que vier do script que você chamou na var "url:" vai ser atribuido na var retorno
                        success: function(retorno){

                            //O script me retorna um array em json... então vou fazer um loop para ler todos os itens e adicionar as options para o s2
                            for(var i in retorno){
                                s2.append('<option value=' + retorno[i]['value'] + '>' + retorno[i]['descricao'] + '</option>');
                            }
                        } 
                    });
                });
                
                s2.change(function(){
                    
                    limpar(s3);
                    
                    $.ajax({
                        url: String(document.location),
                        type: 'post',
                        data: {'select2': s2.val()},
                        dataType: 'json',
                        success: function(retorno){
                            for(var i in retorno){
                                s3.append('<option value=' + retorno[i]['value'] + '>' + retorno[i]['descricao'] + '</option>');
                            }
                        } 
                    });
                });
                
            });
        </script>

Antonio428 · Julho 29, 2010

Então o problema é que a variavel $ret não esta recebenco o valor quando eu seleciono alguma opção

eu forcei o valor do $ret para 1 e ele me trouxe os outros campos..

eu preciso ter alguma coisa alem do wamp5 instalado?

eu estava lendo e vi que o JSON tem suporte apartir do php5

MUITO OBRIGADO PELA AJUDA

Antonio428 · Agosto 3, 2010

Opa,

agora sim deu tudo certo...

O problema que estava acontecendo comigo era o seguinte:

1º o json tem suporte apartir do php5 ai precisava ter o php mais atual

2º por algum motivo o php não estava respondendo corretamente na minha maquina, ai eu acabei formatando

depois instalei o wamp2 que da suporte para o php5 fiz as alterações no codigo e deu tudo certo...

valew pela ajuda ai...

segue o cod:

<?php

if( $_POST['select1'] ){
    
    $ret = null;
    
    if( $_POST['select1'] != NULL){
		$empre_if=$_POST['select1'];

		  require("string.php");
		  $sql=("select * from tbl2");
		  $result=mysql_query($sql);
		  $resp=mysql_num_rows($result);
		  $i=0;  
		  while($i < $resp){
		  $codbloco=mysql_result($result,$i,"blo_codbloco");
		  $blo_nome=mysql_result($result,$i,"blo_nome");
		  $ret[$i]['value'] = $codbloco;
		  $ret[$i]['descricao'] =$blo_nome;
		  $i++;}
   
    }
    
    die( json_encode( $ret ) );
    
}

if( $_POST['select2'] != NULL ){
$bloco_if=$_POST['select2'];
    $ret = null;
    
  require("string.php");
		  $sql3=("select * from tbl3 ");
                 
  $result=mysql_query($sql3);
  $resp=mysql_num_rows($result);
  $i=0;  
  while($i < $resp){
  $pre_cod=mysql_result($result,$i,"pre_cod");
  $pre_nome=mysql_result($result,$i,"pre_nome");
  $ret[$i]['value'] = $pre_cod;
  $ret[$i]['descricao'] =$pre_nome;
  $i++;}
    die( json_encode( $ret ) );
    
}
?>
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <title>Exemplo Imasters</title>
    </head>
    <body>
        
        <select id="select1" onchange="s2(this);"onclick="s2(this);">
            <option value="">--------</option>
          <option value= "NULL">--Selecione--</option>           
				  <?php  
                  require("string.php");
                  $sql=("select * from tbl1");
                  $result=mysql_query($sql);
                  $resp=mysql_num_rows($result);
                  $i=0;  
                  while($i < $resp){
                  $empresa=mysql_result($result,$i,"emp_nome");
                  $cod_emp=mysql_result($result,$i,"emp_cod");                 
				 echo"<option value=".$cod_emp.">".$cod_emp." ".$empresa."</option>";
				 
				 $i++;}
			
				 ?>
	</select>
        </select>
        
        <select id="select2" onchange="s1(this);" onclick="s1">
                  <option value= "NULL">--Selecione--</option>

	  </select>
        </select>
        
        <select id="select3" onchange="s2(this);" onclick="s2">
            <option value="">--------</option>
        </select>
       
        
    <script type="text/javascript">
            $(document).ready(function(){
                
                function limpar( limpo ){
                    limpo.find('option')
                        .remove()
                        .end()
                        .append('<option value="">--------</option>')
                        .val('');
                }
                
                var s1 = $('#select1');
                var s2 = $('#select2');
                var s3 = $('#select3');
                
                s1.change(function(){
                    
                    limpar(s2);
                    limpar(s3);
                    
                    $.ajax({
                        url: String(document.location),
                        type: 'post',
                        data: {'select1': s1.val()},
                        dataType: 'json',
                        success: function(retorno){
                            for(var i in retorno){
                                s2.append('<option value=' + retorno[i]['value'] + '>' + retorno[i]['descricao'] + '</option>');
                            }
                        } 
                    });
                });
                
                s2.change(function(){
                    
                    limpar(s3);
                    
                    $.ajax({
                        url: String(document.location),
                        type: 'post',
                        data: {'select2': s2.val()},
                        dataType: 'json',
                        success: function(retorno){
                            for(var i in retorno){
                                s3.append('<option value=' + retorno[i]['value'] + '>' + retorno[i]['descricao'] + '</option>');
                            }
                        } 
                    });
                });
                
            });
        </script>
    </body>
</html>

Arquivado

[Resolvido] Como criar 3 select option com MySql

Recommended Posts

Antonio428 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rogério Y. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Antonio428 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

AmareshinO 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Antonio428 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Antonio428 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rogério Y. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Antonio428 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rogério Y. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Antonio428 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Antonio428 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante