[Resolvido] Popular um select de acordo com a seleção do anterior

Roo · Dezembro 22, 2010

Boa noite a todos,

Tenho dois selects que são populados pelo banco de dados: FORNECEDOR e ITEM. Gostaria de que dependendo de qual FORNECEDOR a pessoa selecionasse, o select ITEM se popularia com os produtos daquele fornecedor...

A explicação mais clara que encontrei foi esta aqui do fórum, mas ainda não consegui entender: http://scriptbrasil.com.br/forum/index.php?showtopic=102256

Alguém poderia me ajudar? Muito obrigado.

Editado Janeiro 4, 2011 por Roo

ESerra · Dezembro 22, 2010

O ideal é você utilizar AJAX para carregar os dados no segundo select sem ter que atualizar a página...

Isso pode ser feito facilmente com jQuery, caso queira fazer na unha, tem este tutorial que ensina a fazer também.

Roo · Dezembro 22, 2010

O ideal é você utilizar AJAX para carregar os dados no segundo select sem ter que atualizar a página...
Isso pode ser feito facilmente com jQuery, caso queira fazer na unha, tem este tutorial que ensina a fazer também.

Boa noite amigo, obrigado pelo conselho!

Segui o modelo indicado por este artigo do link e o exemplo funcionou, mas quando fui implementar no meu sitezinho ali não deu certo...

Preenche o segundo select com um erro enorme dizendo que "BOOLEAN GIVEN IN C:\ARQUIVOS DE PROGRAMAS\EASYPHP5.3.0\WWW\TESTES\ESTOQUE\RESULT.PHP ON LINE 16" e mais o código fonte da página toda...

A linha 16 do result.php tem:

while( $row = mysql_fetch_assoc($consulta) ){

Olha só como ficou: Arquivo de gerenciar entrada/saída de estoque (a parte de JavaScript):

<script language="JavaScript" type="text/JavaScript">
/* Ao chamarmos a função list_dados a mesma irar chamar a página result.php?id=parametro , porem essa página não será mostrada para o usuário, somente processada onde retornaremo o valor pretendido. Ao concluir chamamos a função handleHttpResponse. Que é a responsavel por monstar nosso listmenu de resposta. */
function list_dados( valor ){
//    http.open("GET", "estoque/result.php?id=" + valor, true);
    http.open("GET", "index.php?exibe=result&id=" + valor, true);
    http.onreadystatechange = handleHttpResponse;
    http.send(null);
}      
      
/* Chamamos a função handleHttpResponse. Que é a responsavel por monstar nosso listmenu de resposta. Essa função tem como objetivo monstrar nosso listmenu, textarea e outro caso seja de sua vontade com o resultado da página processada. */
function handleHttpResponse(){
    campo_select = document.forms[0].subcategoria;
    if (http.readyState == 4) {
        campo_select.options.length = 0;
        results = http.responseText.split(",");
        for( i = 0; i < results.length; i++ ){
        string = results[i].split( "|" );
        campo_select.options[i] = new Option( string[0], string[1] );
        }
    }
}

/* Essa função é somente para identificar o Navegador e suporte ao XMLHttpRequest.     */ 
function getHTTPObject() {
    var req;
    try {
        if (window.XMLHttpRequest) {
            req = new XMLHttpRequest();
            if (req.readyState == null) {
                req.readyState = 1;
                req.addEventListener("load", function () {
                req.readyState = 4;
                if (typeof req.onReadyStateChange == "function")
                    req.onReadyStateChange();
                }, false);
            }
        return req;
    }
if (window.ActiveXObject) {
    var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
    for (var i = 0; i < prefixes.length; i++) {
        try {
            req = new ActiveXObject(prefixes[i] + ".XmlHttp");
            return req;
        } catch (ex) {};
    }
}
    } catch (ex) {}
    alert("XmlHttp Objects not supported by client browser");
}
/* Logo após fazer a verificação, é chamada a função e passada o valor à variável global http. */
var http = getHTTPObject();
</script>

A parte do primeiro select:

<select name="Fornecedor" id="Fornecedor" onchange="list_dados( this.value )">
          <option></option>
<?php
    $consulta = mysql_query("SELECT * FROM fornecedores ORDER BY Nome_razao ASC");
    while( $row = mysql_fetch_assoc($consulta) ){
        echo "<option value=\"{$row['Codigo']}\">{$row['Nome_razao']}</option>\n";
    }
?>
</select>

A parte do segundo select:

<select name="subcategoria"></select>

O result.php:

<?php
include ("../banco/conectar_banco.php");

/* Guardando o id passado pelo form select
    Trim remove os espaços no inicio e final
    addslashes Retorna uma string com barras invertidas antes de caracteres
    que precisam ser escapados para serem escapados em query a banco de dados */
    $categoria = addslashes(trim($_GET["id"]));

    echo $categoria;
/* Fazendo nosso select para todas subcategorias que pertencem à categoria presente
    na variavel $categoria acima */
    $consulta = mysql_query("SELECT * FROM estoque_itens WHERE Fornecedor = '$categoria' ORDER BY Nome_razao ASC" );  

//    while( $row = mysql_fetch_assoc($consulta) ){
    while( $row = mysql_fetch_assoc($consulta) ){
        /* subcategoria será apresentada da forma "NOME|CODIGO,..."
        Maneira a ser tratada no JavaScript
        Vale lembrar que estamos contatenando o "nome" com a "|" com o "codigo" e com a "," */
        echo $row["Nome_item"] . "|" . $row["Codigo"] . ",";
    }
?>

O que será que falta (ou sobra)? Obrigado.

david.lyonnais · Dezembro 23, 2010

Mude isso:

while( $row = mysql_fetch_assoc($consulta) ){
        /* subcategoria será apresentada da forma "NOME|CODIGO,..."
        Maneira a ser tratada no JavaScript
        Vale lembrar que estamos contatenando o "nome" com a "|" com o "codigo" e com a "," */
        echo $row["Nome_item"] . "|" . $row["Codigo"] . ",";
    }

Por isso,a niveld e teste:

while( $row = mysql_fetch_array($consulta) ){
        /* subcategoria será apresentada da forma "NOME|CODIGO,..."
        Maneira a ser tratada no JavaScript
        Vale lembrar que estamos contatenando o "nome" com a "|" com o "codigo" e com a "," */
        echo $row['Nome_item'] . "|" . $row['Codigo'] . ",";
    }

Ver ai no que da.

Roo · Dezembro 23, 2010

Mude isso:

while( $row = mysql_fetch_assoc($consulta) ){
        /* subcategoria será apresentada da forma "NOME|CODIGO,..."
        Maneira a ser tratada no JavaScript
        Vale lembrar que estamos contatenando o "nome" com a "|" com o "codigo" e com a "," */
        echo $row["Nome_item"] . "|" . $row["Codigo"] . ",";
    }

Por isso,a niveld e teste:

while( $row = mysql_fetch_array($consulta) ){
        /* subcategoria será apresentada da forma "NOME|CODIGO,..."
        Maneira a ser tratada no JavaScript
        Vale lembrar que estamos contatenando o "nome" com a "|" com o "codigo" e com a "," */
        echo $row['Nome_item'] . "|" . $row['Codigo'] . ",";
    }

Ver ai no que da.

Pois é, até já tinha feito isto mas fiz novamente copiando o código que você sugeriu mas o problema continua... :(

Jefferson Oliveira · Dezembro 24, 2010

Via ajax os dados são enviados pelo $_GET? por isso quando uso ajax eu uso o $_REQUEST[] ou $_POST[] poderia ser isso ou já esta trazendo os dados do item?

O arquivo de AJAX que tenho ele tem as seguintes funcoes executar() incluir() e xhSend();

Veja os parametros:

function xhSend(url,formu,funcao){}

function include(url,parametros,div){}

essa funcao aqui inclui qualquer arquivo em um determinada div - muito boa

function executar(url,parametros,funcao){}

esta é a funcao que mais uso.

Caso queiram estre arquivo ejax.js posso passar pra vocês

Roo · Dezembro 24, 2010

Via ajax os dados são enviados pelo $_GET? por isso quando uso ajax eu uso o $_REQUEST[] ou $_POST[] poderia ser isso ou já esta trazendo os dados do item?
O arquivo de AJAX que tenho ele tem as seguintes funcoes executar() incluir() e xhSend();
Veja os parametros:
function xhSend(url,formu,funcao){}
function include(url,parametros,div){}
essa funcao aqui inclui qualquer arquivo em um determinada div - muito boa
function executar(url,parametros,funcao){}
esta é a funcao que mais uso.
Caso queiram estre arquivo ejax.js posso passar pra vocês

Bom dia, Jefferson, quero sim. Para um iniciante toda força é bem-vinda, hehehe! Não entendi muito bem essa questão das funções aí... Significa que devo mudar os $_GET por $_REQUEST? Obrigado.

Roo · Dezembro 27, 2010

Via ajax os dados são enviados pelo $_GET? por isso quando uso ajax eu uso o $_REQUEST[] ou $_POST[] poderia ser isso ou já esta trazendo os dados do item?
O arquivo de AJAX que tenho ele tem as seguintes funcoes executar() incluir() e xhSend();
Veja os parametros:
function xhSend(url,formu,funcao){}
function include(url,parametros,div){}
essa funcao aqui inclui qualquer arquivo em um determinada div - muito boa
function executar(url,parametros,funcao){}
esta é a funcao que mais uso.
Caso queiram estre arquivo ejax.js posso passar pra vocês
Bom dia, Jefferson, quero sim. Para um iniciante toda força é bem-vinda, hehehe! Não entendi muito bem essa questão das funções aí... Significa que devo mudar os $_GET por $_REQUEST? Obrigado.

Tentei trocar o GET pelo REQUEST e não mudou nada. A não ser que não tenha entendido direito... Pode me ajudar um pouco mais? Obrigado.

Jefferson Oliveira · Dezembro 27, 2010

Ok, esta ai o arquivo só salvar, no codigo dele tem algumas explicações, caso queira uma força você responde aqui. Vlw

Segue o código:

http://programarearte.com.br/jadmin/js/ejax.js

Editado Dezembro 27, 2010 por Jefferson Oliveira

Roo · Dezembro 27, 2010

Ok, esta ai o arquivo só salvar, no codigo dele tem algumas explicações, caso queira uma força você responde aqui. Vlw
Segue o código:
http://programarearte.com.br/jadmin/js/ejax.js

Boa noite Jefferson, talvez seja até feio demais dizer isto, mas não consegui entender como adapto isso ao meu código! :(

Caberia um pouco mais de explicação ou estaria abusando da sua boa vontade? Obrigado.

Jefferson Oliveira · Dezembro 28, 2010

Assim Roo

você tem um select não é?

Um exemplo abaixo:

FORM.HTML

<!-- LINK PARA O AJAX-->
<script type="text/javascript" src="js/ejax.js"></script>

<script type="text/javascript">
function carregaCidade(estado){
include("modulo/carrega-cidade.php","estado="+estado,"CarregaCidade");
}
</script>

<select name="Estado" onChange="java script:carregaCidade(this.value);">
<option value="CE">Ceara</option>
</select>

<select id="CarregaCidade">
<option>Selecione um estado</option>
</select>

A funcao acima vai fazer um consulta via ajax para pagina carrega-cidade.php mandando o parametro via $_POST chamada de ESTADO, agora vamos ver como vai ficar o arquivo carrega-cidade.php carrega-cidade.php

<?PHP
if($_POST["estado"]=="CE"){
?>
<option value="Fortaleza">Fortaleza</option>
<option value="Quixada">Quixada</option>
<?PHP 
}elseif($_POST["estado"]=="SP"){
?>
<option value="são Paulo">são Paulo</option>
<? 
}
?>

Usei Ceara porque e a terra onde eu moro :D

Ai quando o arquivo carrega-cidade.php for carregado ele ira traser todos os <option> da cidade referente, e a funcao vai incluir entre o <select> que estiver com o id CarregaCidade pois na funcao determinei que ira incluir nesse ID

Qual quer duvida, se estiver muito dificil eu posso fazer essa solucao pra voce, so mandar as tabelas, mais com essa explicacao voce devera entender e adaptar seu codigo.

Vlw abraco!

Desculpa a falta de acentos nas palavras, meu pc e americano :(

Editado Dezembro 28, 2010 por Jefferson Oliveira

Roo · Dezembro 28, 2010

Prezado Jefferson, tentei adaptar mas não consegui... Uma coisa que notei é que ou o include não está funcionando ou o $_POST, pois ele não imprime o valor da variável dando um echo, veja como ficou o código:

gerenciar_entrada_saida_estoque.php:

<!-- LINK PARA O AJAX-->
&lt;script type="text/javascript" src="css/ejax.js"></script>

&lt;script language="JavaScript" type="text/JavaScript">

/* Script do Jefferson Oliveira do ScriptBrasil: */
function carregaItem(Fornecedor){
include("estoque/carrega_item_fornecedor.php","fornecedor="+fornecedor,"Nome_item");
}
</script>

<select name="Fornecedor" id="Fornecedor" onChange="java script:carregaItem(this.value);">
          <option></option>
<?php
    $consulta = mysql_query("SELECT * FROM fornecedores ORDER BY Nome_razao ASC");
    while( $row = mysql_fetch_assoc($consulta) ){
        echo "<option value=\"{$row['Codigo']}\">{$row['Nome_razao']}</option>\n";
    }
?>
</select>

<select name="Nome_item" id="Nome_item">
      <option>Selecione aqui</option>
</select>

carrega_item_fornecedor.php:

<?PHP
$Fornecedor = $_POST["fornecedor"];
echo "Aqui o fornecedor: $Fornecedor";
if($Fornecedor == ""){
?>
<option value="Fortaleza">Fortaleza</option>
<option value="Quixada">Quixada</option>
<?PHP
}elseif($Fornecedor=="ASDFDSFDF"){
?>
<option value="são Paulo">são Paulo</option>
<?PHP
}
?>

O que será que pode ser ainda? Obrigado.

Roo · Dezembro 31, 2010

Bom dia gente,

Alguém que estiver vendo aí talvez poderia, por gentileza, dar mais alguma idéia? Está bem complicado entender essa lógica. Obrigado.

Stoma · Dezembro 31, 2010

Olá! Fiz um exemplo aqui, é só adaptar para o que você precisa...

obs: estou utilizando jQuery para fazer a requisição Ajax, então você vai precisar ter o arquivo jquery.js... aliás, estude jQuery pois será de grrraaande utilidade!

obs2: você pode fazer o download do jQuery nesta página http://jquery.com/

teste.php

<?php

    ini_set('display_errsors', 1);
    error_reporting(E_ALL);
    
    // Conexão ao banco de dados
    mysql_connect('localhost', '', '') or die(mysql_error());
    mysql_select_db('teste') or die(mysql_error());
    
    $selectFornecedores = '';
    $sql = "SELECT cd_fornecedor, nome FROM fornecedor";
    $rs = mysql_query($sql) or die(mysql_error());
    while($dados = mysql_fetch_assoc($rs)){
        // Monta os dados do selectbox fornecedores
        $selectFornecedores .= "<option value='".$dados['cd_fornecedor']."'>".$dados['nome']."</option>";
    }
    
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
        <title>Testando</title>
        
        <script src='jquery.js' type='text/javascript'></script> <!-- Importação do jQuery -->
        <style type='text/css'>
            <!-- CSS -->
            div{
                float: left;
                margin-left: 20px;
            }
            select{
                width: 200px;
            }
            #divCarregando{
                position: absolute;
                width: 300px;
                height: 40px;
                padding: 5px;
                padding-top: 20px;
                background-color: #00688B;
                color: #FFF;
                font: bold 16px Verdana;
                text-align: center;
                border: 1px solid black;
                top: 50%;
                margin-top: -30px;
                left: 50%;
                margin-left: -150px;
            }
        </style>
    </head>
    <body>
        <form id='formulario' actin='#' method='post'>
            <div>
                <label for='cd_fornecedor'>Fornecedor</label><br/>
                <select id='cd_fornecedor'>
                    <option value=''> -- Selecione -- </option>
                    <?php echo($selectFornecedores); // Preenche o selectbox com os dados ?>
                </select>
            </div>
            <div>
                <label for='cd_item'>Item:</label><br/>
                <select id='cd_item'>
                    <option value=''> -- Selecione -- </option>
                </select>
            </div>
        </form>
        <div id='divCarregando' style='display:none;'>
            <!-- DIV que aparecerá enquanto estiver esperando a resposta do AJAX -->
            Aguarde, carregando dados...
        </div>
        
        <script type='text/javascript'>
            try{
                // Ao ser alterado o valor do campo cd_fornecedor
                $('#cd_fornecedor').change(function(){
                    $('#divCarregando').show(); // Exibe divCarregando
                    // Executa requisição ajax (por POST)
                    $.post(
                        'ajax.php', // Nome da página que será requisitada
                        {
                            // Variáveis a serem passadas para a página ajax.php
                            action: 'carregarItens', // Ação a ser feita (utilizado na página ajax.php)
                            cd_fornecedor: $('#cd_fornecedor').val() // Passa o valor do campo cd_fornecedor
                        },function(data){ // data = retorno da página ajax.php
                            $('#cd_item').html(data); // Coloca o retorno no campo cd_item
                            $('#divCarregando').hide(); // Oculta divCarregando
                        }
                    );
                });
            }catch(ex){
                alert('Erro\n'+ex);
            }
        </script>
    </body>
</html>

ajax.php

<?php

    ini_set('display_errors', 1);
    error_reporting(E_ALL);

    if($_POST){
        // Conexão ao banco de dados
        mysql_connect('localhost', '', '');
        mysql_select_db('teste');
        
        // Verifica qual ação será feita
        switch($_POST['action']){
            case 'carregarItens':
                $cdFornecedor = $_POST['cd_fornecedor'];
                $retorno = "<option value=''> -- Selecione -- </option>";
                
                if($cdFornecedor!=''){
                    $sql = "SELECT cd_item, descricao FROM item WHERE cd_fornecedor = $cdFornecedor";
                    $rs = mysql_query($sql) or die(mysql_error());
                    while($dados = mysql_fetch_assoc($rs)){
                        // Monta os dados (no formato certo) que serão colocados no selectbox
                        $retorno .= "<option value='".$dados['cd_item']."'>".$dados['descricao']."</option>";
                    }
                }
                // Retorna os dados para a função javascript (não use return, apenas o echo)
                echo $retorno;
            break;
        }
    }

?>

Editado Dezembro 31, 2010 por Stoma

Roo · Janeiro 4, 2011

Olá! Fiz um exemplo aqui, é só adaptar para o que você precisa...

obs: estou utilizando jQuery para fazer a requisição Ajax, então você vai precisar ter o arquivo jquery.js... aliás, estude jQuery pois será de grrraaande utilidade!

obs2: você pode fazer o download do jQuery nesta página http://jquery.com/

teste.php

<?php

    ini_set('display_errsors', 1);
    error_reporting(E_ALL);
    
    // Conexão ao banco de dados
    mysql_connect('localhost', '', '') or die(mysql_error());
    mysql_select_db('teste') or die(mysql_error());
    
    $selectFornecedores = '';
    $sql = "SELECT cd_fornecedor, nome FROM fornecedor";
    $rs = mysql_query($sql) or die(mysql_error());
    while($dados = mysql_fetch_assoc($rs)){
        // Monta os dados do selectbox fornecedores
        $selectFornecedores .= "<option value='".$dados['cd_fornecedor']."'>".$dados['nome']."</option>";
    }
    
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
        <title>Testando</title>
        
        &lt;script src='jquery.js' type='text/javascript'></script> <!-- Importação do jQuery -->
        <style type='text/css'>
            <!-- CSS -->
            div{
                float: left;
                margin-left: 20px;
            }
            select{
                width: 200px;
            }
            #divCarregando{
                position: absolute;
                width: 300px;
                height: 40px;
                padding: 5px;
                padding-top: 20px;
                background-color: #00688B;
                color: #FFF;
                font: bold 16px Verdana;
                text-align: center;
                border: 1px solid black;
                top: 50%;
                margin-top: -30px;
                left: 50%;
                margin-left: -150px;
            }
        </style>
    </head>
    <body>
        <form id='formulario' actin='#' method='post'>
            <div>
                <label for='cd_fornecedor'>Fornecedor</label><br/>
                <select id='cd_fornecedor'>
                    <option value=''> -- Selecione -- </option>
                    <?php echo($selectFornecedores); // Preenche o selectbox com os dados ?>
                </select>
            </div>
            <div>
                <label for='cd_item'>Item:</label><br/>
                <select id='cd_item'>
                    <option value=''> -- Selecione -- </option>
                </select>
            </div>
        </form>
        <div id='divCarregando' style='display:none;'>
            <!-- DIV que aparecerá enquanto estiver esperando a resposta do AJAX -->
            Aguarde, carregando dados...
        </div>
        
        &lt;script type='text/javascript'>
            try{
                // Ao ser alterado o valor do campo cd_fornecedor
                $('#cd_fornecedor').change(function(){
                    $('#divCarregando').show(); // Exibe divCarregando
                    // Executa requisição ajax (por POST)
                    $.post(
                        'ajax.php', // Nome da página que será requisitada
                        {
                            // Variáveis a serem passadas para a página ajax.php
                            action: 'carregarItens', // Ação a ser feita (utilizado na página ajax.php)
                            cd_fornecedor: $('#cd_fornecedor').val() // Passa o valor do campo cd_fornecedor
                        },function(data){ // data = retorno da página ajax.php
                            $('#cd_item').html(data); // Coloca o retorno no campo cd_item
                            $('#divCarregando').hide(); // Oculta divCarregando
                        }
                    );
                });
            }catch(ex){
                alert('Erro\n'+ex);
            }
        </script>
    </body>
</html>

ajax.php

<?php

    ini_set('display_errors', 1);
    error_reporting(E_ALL);

    if($_POST){
        // Conexão ao banco de dados
        mysql_connect('localhost', '', '');
        mysql_select_db('teste');
        
        // Verifica qual ação será feita
        switch($_POST['action']){
            case 'carregarItens':
                $cdFornecedor = $_POST['cd_fornecedor'];
                $retorno = "<option value=''> -- Selecione -- </option>";
                
                if($cdFornecedor!=''){
                    $sql = "SELECT cd_item, descricao FROM item WHERE cd_fornecedor = $cdFornecedor";
                    $rs = mysql_query($sql) or die(mysql_error());
                    while($dados = mysql_fetch_assoc($rs)){
                        // Monta os dados (no formato certo) que serão colocados no selectbox
                        $retorno .= "<option value='".$dados['cd_item']."'>".$dados['descricao']."</option>";
                    }
                }
                // Retorna os dados para a função javascript (não use return, apenas o echo)
                echo $retorno;
            break;
        }
    }

?>

Beleza, muito obrigado! Abraços.

Entrar

[Resolvido] Popular um select de acordo com a seleção do anterior

Pergunta

Link para o comentário

Compartilhar em outros sites

14 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns