TransWikia.com

Combobox receber dados no segundo campo (list menu)

Stack Overflow em Português Asked by César Mattos on December 4, 2021

Questão: Tenho 2 Select Menu e preciso que o segundo select mude com grupo de dados de acordo com a escolha do primeiro. Como por exemplo marca de carros e modelos. No primeiro select as marcas e no segundo os modelos.

Testes: Eu já tentei vários formatos de vídeos no Youtube e daqui, procurei no Google e alguns funcionam mas a maioria não funciona e mesmo quando adapto ao problema que preciso resolver acaba não funcionando.

O que tenho: Mysql com todas informações. Duas tabelas, uma tabela apenas com marcas e a outra tabela com 2 colunas (marca e modelo).

Último teste: Tentei fazer um While pra buscar, enquanto o “value” de uma select for igual ao da outra tabela, exibir os registros do modelo da segunda tabela, só que só retorna valor em branco. A conexão do Banco de dados está funcionando, pois faço o teste e retorna resultado (pelo Dreamweaver) mas no menu list box não mostra resultado. Comando para o Javascript que segue abaixo:

<script type="text/javascript">
            function exiv() {
            var torinogv = document.getElementById("carrmarca").value;
            var seniorgv = document.getElementById("carrmodelo").value;

            var option = document.createElement("option");

                while (seniorgv == torinogv) {
                    option = document.getElementById("carrmodelo").text;
                    seniorgv.appendChild(option);
                }

            }
        </script>
comboboxjavascriptmenusql

One Answer

Fala César Mattos!

Pelo que entendi, você quer fazer as famosas "Combobox em Cascata", ou seja o preenchimento de uma depende do valor selecionado em outra?

Se for isso, tenho uma solução simples usando HTML, PHP, AJAX e MYSQL.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Acesso - Petrovendas</title>
        <link href="src/css/bootstrap.css" rel="stylesheet" type="text/css"/>
        <link href="src/css/w3schools.css" rel="stylesheet" type="text/css"/>
        <link href="src/css/semantic.css" rel="stylesheet" type="text/css"/>
        <link href="src/css/styles.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <!-- Container -->
        <div class="w3-container">
            <form id="form_login" class="form-login w3-round w3-card-4" method="POST">
                <div id="logo" class="w3-center div-logo">
                    <img src="src/img/logo_carro.png" height="80px" class="img-logo"/>
                </div>
                <div class="form-group">
                    <select class="form-control" id="select-marca">
                        <option value="">Selecione uma marca...</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control" id="select-modelo">
                        <option value="">Selecione um modelo...</option>
                    </select>
                </div>
                <br>
            </form>
        </div>
    </body>
    <script src="src/js/jquery-3.2.1.min.js" type="text/javascript"></script>

</html>

JAVASCRIPT COM O MÉTODO AJAX USANDO JQUERY:

/*
 * função executada ao carregar o DOM
 * lista todos os registros da tabela MARCA
 * via AJAX
 */
$(document).ready(function () {
    $.ajax({
        type: 'POST',
        dataType: 'JSON',
        url: 'processa-ajax.php?op=' + 'marca' + '&tabela=' + 'tbl_marca',
        success: function (dados) {
            $('#select-marca').empty();
            $("#select-marca").append('<option value="">Selecione uma marca...</option>');
            if (dados) {
                for (var i = 0; i < dados.length; i++) {
                    $("#select-marca").append("<option" + " value='" + dados[i].id + "'" + ">" + dados[i].marca + "</option>");
                }
            }
        }
    });
    $("#select-marca").val($("#select-marca option:first").val());
});

/*
 * função executa ao selecionar algum registro
 * no componente SELECT da MARCA.
 * preenche o SELECT dos com os modelos filtrados
 * na consulta via AJAX
 */
$("#select-marca").change(function () {
    var idMarca = $(this).val();
    $.ajax({
        type: 'POST',
        dataType: 'JSON',
        url: 'processa-ajax.php?op=' + 'modelo' + '&tabela=' + 'tbl_modelo' + '&id_marca=' + idMarca,

        success: function (dados) {
            $("#select-modelo").empty();
            $("#select-modelo").append('<option value="">Selecione um modelo...</option>');
            for (var i = 0; i < dados.length; i++) {
                $("#select-modelo").append("<option" + " value='" + dados[i].id + "'" + ">" + dados[i].modelo + "</option>");
            }
        }
    });
    $("#select-modelo").val($("#select-modelo option:first").val());
});

MEU ESTILO CSS

body{
    background: #eeeeee; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #eeeeee 0%, #cccccc 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #eeeeee 0%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #eeeeee 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.form-login{
    width: 350px;
    margin: 100px auto;
    padding: 15px 30px 10px 30px;
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(238,238,238,1) 0%, rgba(238,238,238,1) 46%, rgba(234,234,234,1) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 46%,rgba(234,234,234,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 46%,rgba(234,234,234,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.form-control{
    height: 38px;
}

.div-logo{
    margin-top: 10px;
    margin-bottom: 20px;
}

.btn-entrar{
    color: #fff;
    height: 40px;
    font-weight: bold;
    border: 1px solid #000;
    background: #cc0000;
    background: -moz-linear-gradient(top, #cc0000 10%, #910000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #cc0000 10%,#910000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #cc0000 10%,#910000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#910000',GradientType=0 ); /* IE6-9 */
}

.btn-entrar:hover{
    color: #ffffff;
}

.direitos{
    width: auto;
    margin: 0 auto!important;
}

.direitos p{
    font-family: "Arial";
    color: black;
}

.direitos img{
    border: 1px solid #bbb;
    border-radius: 5px;
    padding: 5px;
}

.div-sidbar{
    
}

Como não tenho a base de dados para disponibilizar, adicionei algumas imagens do resultado obtido no meu LOCALHOST, para ter uma ideia da aplicação rodando.

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Espero que seja isso que você estava querendo fazer!? Se sim, espero ter ajudado.

Segue código do arquivo PHP que seria a URL do AJAX

<?php

     //incluindo os arquivos conexão e crud PHP
     require_once "./cls/Conexao.class.php";
     require_once "./cls/Crud.class.php";

     //verificando se existe um método GET ou POST
     if ($_POST || $_GET) {

         // Atribui uma conexão PDO   
         $pdo = Conexao::getInstance();

             //switch para verificar a opção da operação
switch ($_GET['op']) {

    //opção para listar todas as marcas da tabela MARCA
    case "marca":

        //recuperando o nome da tabela passado via AJAX e método GET
        $tabela = $_GET['tabela'];

        //instanciando a respectiva tabela
        $crud = Crud::getInstance($pdo, $_GET['tabela']);

        //instrução SQL para listar todas as marcas da tabela marca
        $sql = "SELECT * FROM $tabela";

        //não é passado nenhum parametro neste caso, já que será listado todos os registros
        $arrayParam = NULL;

        //chamando o método da classe Crud e passando os parametros
        $dados = $crud->getSQLGeneric($sql, $arrayParam, TRUE);

        //exibindo os registros da consulta para um JSON
        echo json_encode($dados);

        break;

    //opção para listar os modelos relacionados com a marca escolhida
    case "modelo":
        $tabela = $_GET['tabela'];
        $crud = Crud::getInstance($pdo, $_GET['tabela']);

        //instrução SQL para lista os modelos e como parametro o id da marca
        $sql = "SELECT * FROM $tabela WHERE id_marca = ?";

        //array de parametros, neste caso somente um o ID da MARCA
        $arrayParam = array($_GET['id_marca']);

        //chamando o método da classe Crud e passando os parametros
        $dados = $crud->getSQLGeneric($sql, $arrayParam, TRUE);

        //exibindo os registros da consulta para um JSON
        echo json_encode($dados);

        break;
}

     }

?>

Answered by RDamazio on December 4, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP