Como interligar 4 Selects um dependente do outro?

admtwbful · Agosto 26

Bom dia a todos,

Estou desenvolvendo um formulário que permite ao usuário selecionar dados em uma sequência de tabelas interligadas. O fluxo de seleção que estou tentando implementar é o seguinte:

Tabela 1 > Tabela 2 > Tabela 3 > Tabela 4

No meu código atual, já consegui fazer a interligação entre a Tabela 1 (Usuários) e a Tabela 2 (Fazendas), mas estou enfrentando dificuldades para fazer o mesmo entre a Tabela 2 e as Tabelas 3 (Lotes) e 4 (Talhões).

Aqui estou seguindo o seguinte exemplo:

<div class="frm-row">
    <div class="section colm colm6">
        <label class="field select prepend-icon">
            <?php
            $usuarios_resultados = $conn->query('select * from usuarios');
            ?>
            <select name="id_usuario" id="usuarios_lista" class="example-data-array smart-select2 select2-hidden-accessible" style="width:100%" tabindex="-1" aria-hidden="true">
                <option>Selecione o Cliente</option>
                <?php
                if ($usuarios_resultados->num_rows > 0) {
                    // output data of each row
                    while ($row = $usuarios_resultados->fetch_assoc()) {
                ?>
                        <option value="<?php echo $row["id"]; ?>" <?php if ($sql['id_usuario'] == $row['id']) echo " selected"; ?>><?php echo $row["nome"]; ?></option>
                <?php
                    }
                }
                ?>
            </select>
            <span class="field-icon"><i class="fal fa-user-cowboy"></i></span>
            <i class="arrow"></i>
            <b class="tooltip tip-right-top"><b>Selecione o <span style="color:#6CF;">Cliente</span> Exemplo: <span style="color:#6CF;">Rafael</span></b></b>
        </label>
    </div>

    <div class="section colm colm6">
        <label class="field select prepend-icon">
            <select name="id_fazenda" id="fazendas_lista" class="example-data-array smart-select2 select2-hidden-accessible" style="width:100%" tabindex="-1" aria-hidden="true">
                <?php if ($sql['id_fazenda'] >= 1) { ?>
                    <?php
                    $sqla = mysqli_query($conn, "SELECT * FROM fazendas WHERE id_usuario=$sql[id_usuario] ORDER BY id");
                    while ($coluna = mysqli_fetch_array($sqla)) {
                    ?>
                        <?php if ($sql['id_fazenda'] == $coluna['id']) { ?>
                            <option value="<?php echo $coluna['id']; ?>" <?php if ($sql['id_fazenda'] == $coluna['id']) echo " selected"; ?>>
                                <?php echo $coluna['fazenda'] ?>
                            </option>
                        <?php } else { ?>
                            <option>Selecione a Fazenda</option>
                            <option value="<?php echo $coluna['id']; ?>">
                                <?php echo $coluna['fazenda'] ?>
                            </option>
                        <?php } ?>
                    <?php } ?>
                <?php } else { ?>
                    <option value=''>Selecione a Fazenda</option>
                <?php } ?>
            </select>
            <span class="field-icon"><i class="far fa-farm"></i></span>
            <i class="arrow"></i>
            <b class="tooltip tip-right-top"><b>Digite a <span style="color:#6CF;">usuario</span> Exemplo: <span style="color:#6CF;">Nike</span></b></b>
        </label>
    </div>
</div>

<div class="spacer-b30">
    <div class="tagline"><span style="color: black"> Informações do Lote </span></div>
    <!-- .tagline -->
</div>

<div class="frm-row">
    <div class="section colm colm6">
        <label class="field select prepend-icon">
            <?php
            $lotes_resultados = $conn->query('select * from lotes');
            ?>
            <select name="id_lote" id="lotes_lista" class="example-data-array smart-select2 select2-hidden-accessible" style="width:100%" tabindex="-1" aria-hidden="true">
                <option>Selecione o Cliente</option>
                <?php
                if ($lotes_resultados->num_rows > 0) {
                    // output data of each row
                    while ($row = $lotes_resultados->fetch_assoc()) {
                ?>
                        <option value="<?php echo $row["id"]; ?>" <?php if ($sql['id_lote'] == $row['id']) echo " selected"; ?>><?php echo $row["lote"]; ?></option>
                <?php
                    }
                }
                ?>
            </select>
            <span class="field-icon"><i class="fal fa-user-cowboy"></i></span>
            <i class="arrow"></i>
            <b class="tooltip tip-right-top"><b>Selecione o <span style="color:#6CF;">Lote</span> Exemplo: <span style="color:#6CF;">Rafael</span></b></b>
        </label>
    </div>

    <div class="section colm colm6">
        <label class="field select prepend-icon">
            <select name="id_talhao" id="talhoes_lista" class="example-data-array smart-select2 select2-hidden-accessible" style="width:100%" tabindex="-1" aria-hidden="true">
                <?php
                $sqla = mysqli_query($conn, "SELECT * FROM talhoes WHERE id_lote=$sql[id_lote] ORDER BY id");
                while ($coluna = mysqli_fetch_array($sqla)) {
                ?>
                    <?php if ($sql['id_talhao'] == $coluna['id']) { ?>
                        <option value="<?php echo $coluna['id']; ?>" <?php if ($sql['id_talhao'] == $coluna['id']) echo " selected"; ?>>
                            <?php echo $coluna['talhao'] ?>
                        </option>
                    <?php } else { ?>
                        <option>Selecione o Talhão</option>
                        <option value="<?php echo $coluna['id']; ?>">
                            <?php echo $coluna['talhao'] ?>
                        </option>
                    <?php } ?>
                <?php } ?>
            </select>
            <span class="field-icon"><i class="far fa-farm"></i></span>
            <i class="arrow"></i>
            <b class="tooltip tip-right-top"><b>Selecione o <span style="color:#6CF;">Talhão</span> Exemplo: <span style="color:#6CF;">Nike</span></b></b>
        </label>
    </div>
</div>

Aqui estou seguindo o seguinte exemplo:

Tabela 1 > Tabela 2 > Tabela 3 > Tabela 4 >

<script>
$('#usuarios_lista').on('change', function() {
    var id_usuario = this.value;
    $.ajax({
        type: "POST",
        url: "pega_fazendas.php",
        data: {
            "id_usuario": id_usuario
        },
        success: function(result) {
            $("#fazendas_lista").html(result);
        }
    });
});

$('#lote_lista').on('change', function() {
    var id_usuario = this.value;
    $.ajax({
        type: "POST",
        url: "pega_talhoes.php",
        data: {
            "id_lote": id_lote
        },
        success: function(result) {
            $("#talhoes_lista").html(result);
        }
    });
});


</script>

Tabela um e tabela 2 já estão interligadas, o que não estou conseguindo é interligar o resultado da tabela 2 com a tabela 3 e 4

Pega Fazendas

<?php
require_once('dbconfig.php');


if(!empty($_POST["id_usuario"])) 	{

$id_usuario=intval($_POST['id_usuario']);
$query=mysqli_query($conn,"SELECT * FROM fazendas WHERE id_usuario=$id_usuario");

	if($query->num_rows >= 1){

		?>
<option disabled>Selecione a Fazenda</option>
<? while($row=mysqli_fetch_array($query)) { 
		

	    ?>

<option value="<?php echo htmlentities($row['id']); ?>"><?php echo htmlentities($row['fazenda']); ?></option>
<?		
	}

	}else{ ?>
	<option disabled selected>Sem Fazenda Cadastrada</option>	

<? } ?>
<? } ?>

Pega Talhões

<?php
require_once('dbconfig.php');


if(!empty($_POST["id_lote"])) 	{

$id_lote=intval($_POST['id_lote']);
$query=mysqli_query($conn,"SELECT * FROM talhoes WHERE id_lote=$id_lote");

	if($query->num_rows >= 1){

		?>
<option disabled>Selecione o Talhão</option>
<? while($row=mysqli_fetch_array($query)) { 
		

	    ?>

<option value="<?php echo htmlentities($row['id']); ?>"><?php echo htmlentities($row['talhao']); ?></option>
<?		
	}

	}else{ ?>
	<option disabled selected>Sem Talhão Cadastrado</option>	

<? } ?>
<? } ?>

Como faço para interligar a escolha do campo 2 com 3 e 4? Obrigado!

admtwbful · Setembro 3

Resolvido vou postar o código abaixo

SCRIPT PHP

 <div class="frm-row">
                            <div class="section colm colm6">
                                <label class="field select prepend-icon">




                                    <select id="id_usuario" name="id_usuario" class="example-data-array smart-select2 select2-hidden-accessible"
                                    style="width:100%" tabindex="-1" aria-hidden="true">
                                    <? $pegausuario = $sql['id_usuario']; ?>
                                    <?php if ($pegausuario > 0) { ?>
                    <?php
                    $sqlu = mysqli_query($conn, "SELECT * FROM usuarios WHERE id = $pegausuario ORDER BY id");
                    while ($coluna = mysqli_fetch_array($sqlu)) {
                    ?>
                        <?php if ($pegausuario == $coluna['id']) { ?>
                            <option value="<?php echo $coluna['id']; ?>" <?php if ($pegausuario == $coluna['id']) echo " selected"; ?>>
                                <?php echo $coluna['id'] ?>
                            </option>
                        <?php }  ?>
         
                        <?php }  ?>
                <?php } else { ?>
                    <option >Selecione o Cliente </option>
                    <?php }  ?>
                                    <!-- Options will be loaded here via AJAX -->
                                     </select>


                                    <span class="field-icon"><i class="fal fa-user-cowboy"></i></span>
                                    <i class="arrow"></i>
                                    <b class="tooltip tip-right-top"><b>Selecione o <span
                                                style="color:#6CF;">Cliente</span> Exemplo: <span style="color:#6CF;">
                                                Rafael </span></b></b>
                                </label>

                            </div>


                            <div class="section colm colm6">
                                <label class="field select prepend-icon">


                                    <select id="id_fazenda" name="id_fazenda"  class="example-data-array smart-select2 select2-hidden-accessible"
                                    style="width:100%" tabindex="-1" aria-hidden="true">
                           
                                    <? $pegafazenda = $sql['id_fazenda']; ?>
                                    <?php if ($pegafazenda > 0) { ?>
                    <?php
                    $sqla = mysqli_query($conn, "SELECT * FROM fazendas WHERE id = $pegafazenda ORDER BY id");
                    while ($coluna = mysqli_fetch_array($sqla)) {
                    ?>
                        <?php if ($sql['id_fazenda'] == $coluna['id']) { ?>
                            <option value="<?php echo $coluna['id']; ?>" <?php if ($sql['id_fazenda'] == $coluna['id']) echo " selected"; ?>>
                                <?php echo $coluna['fazenda'] ?>
                            </option>
                        <?php }  ?>
         
                        <?php }  ?>
                <?php } else { ?>
                    <option >Selecione a Fazenda</option>
                <?php } ?>
                                    <!-- Options will be loaded here via AJAX -->
                                     </select>
                                    <span class="field-icon"><i class="far fa-farm"></i></span>
                                    <i class="arrow"></i>
                                    <b class="tooltip tip-right-top"><b>Digite a <span
                                                style="color:#6CF;">usuario</span> Exemplo: <span style="color:#6CF;">
                                                Nike </span></b></b>
                                </label>

                            </div>

                        </div>


                        <div class="spacer-b30">
                            <div class="tagline"><span style="color: black"> Informações do Lote </span></div>
                            <!-- .tagline -->
                        </div>

                        <div class="frm-row">
                            <div class="section colm colm6">
                                <label class="field select prepend-icon">




                                    <select id="id_lote" name="id_lote"  class="example-data-array smart-select2 select2-hidden-accessible"
                                    style="width:100%" tabindex="-1" aria-hidden="true">
                                    <? $pegalote = $sql['id_lote']; ?>
                                    <?php if ($pegalote > 0) { ?>
                    <?php
                    $sqla = mysqli_query($conn, "SELECT * FROM lotes WHERE id = $pegalote ORDER BY id");
                    while ($coluna = mysqli_fetch_array($sqla)) {
                    ?>
                        <?php if ($sql['id_lote'] == $coluna['id']) { ?>
                            <option value="<?php echo $coluna['id']; ?>" <?php if ($sql['id_lote'] == $coluna['id']) echo " selected"; ?>>
                                <?php echo $coluna['lote'] ?>
                            </option>
                        <?php }  ?>
         
                        <?php }  ?>
                <?php } else { ?>
                    <option >Selecione o Lote</option>
                <?php } ?>
                              <!-- Options will be loaded here via AJAX -->
                        </select>



                                    <span class="field-icon"><i class="fal fa-user-cowboy"></i></span>
                                    <i class="arrow"></i>
                                    <b class="tooltip tip-right-top"><b>Selecione o <span
                                                style="color:#6CF;">Lote</span> Exemplo: <span style="color:#6CF;">
                                                Rafael </span></b></b>
                                </label>

                            </div>


                            <div class="section colm colm6">
                                <label class="field select prepend-icon">


                                    <select id="id_talhao" name="id_talhao" class="example-data-array smart-select2 select2-hidden-accessible"
                                    style="width:100%" tabindex="-1" aria-hidden="true">
                                    <? $pegatalhao = $sql['id_talhao']; ?>
                                    <?php if ($pegatalhao > 0) { ?>
                    <?php
                    $sqla = mysqli_query($conn, "SELECT * FROM talhoes WHERE id = $pegatalhao ORDER BY id");
                    while ($coluna = mysqli_fetch_array($sqla)) {
                    ?>
                        <?php if ($sql['id_talhao'] == $coluna['id']) { ?>
                            <option value="<?php echo $coluna['id']; ?>" <?php if ($sql['id_talhao'] == $coluna['id']) echo " selected"; ?>>
                                <?php echo $coluna['talhao'] ?>
                            </option>
                        <?php }  ?>
         
                        <?php }  ?>
                <?php } else { ?>
                    <option >Selecione o Talhão</option>
                <?php } ?>

Script que vai dentro da página de PHP

<script>
        $(document).ready(function() {
            
            // Load countries
            $.ajax({
                url: 'nome_arquivo.php',
                type: 'POST',
                data: { action: 'getUsuarios' },
                success: function(data) {
                    $('#id_usuario').html(data);
                }
            });

            // Load fazendas based on usuario
            $('#id_usuario').change(function() {
                var usuarioId = $(this).val();
                if (usuarioId) {
                    $.ajax({
                        url: 'nome_arquivo.php',
                        type: 'POST',
                        data: { action: 'getFazendas', usuarioId: usuarioId },
                        success: function(data) {
                            $('#id_fazenda').html(data);
                            $('#id_lote').html('<option value="">Selecione o Lote</option>');
                            $('#id_talhao').html('<option value="">Selecione o Talhão</option>');
                        }
                    });
                } else {
                    $('#id_fazenda').html('<option value="">Selecione a Fazenda</option>');
                    $('#id_lote').html('<option value="">Selecione o Lote</option>');
                    $('#id_talhao').html('<option value="">Selecione o Talhão</option>');
                }
            });

            // Load cities based on fazenda
            $('#id_fazenda').change(function() {
                var fazendaId = $(this).val();
                if (fazendaId) {
                    $.ajax({
                        url: 'nome_arquivo.php',
                        type: 'POST',
                        data: { action: 'getLotes', fazendaId: fazendaId },
                        success: function(data) {
                            $('#id_lote').html(data);
                            $('#id_talhao').html('<option value="">Selecione o Talhão</option>');
                        }
                    });
                } else {
                    $('#id_lote').html('<option value="">Selecione o Lote</option>');
                    $('#id_talhao').html('<option value="">Selecione o Talhão</option>');
                }
            });

            // Load talhaos based on lote
            $('#id_lote').change(function() {
                var loteId = $(this).val();
                if (loteId) {
                    $.ajax({
                        url: 'nome_arquivo.php',
                        type: 'POST',
                        data: { action: 'getTalhaos', loteId: loteId },
                        success: function(data) {
                            $('#id_talhao').html(data);
                        }
                    });
                } else {
                    $('#id_talhao').html('<option value="">Selecione o Talhão</option>');
                }
            });
        });
    </script>

SCRIPT nome_arquivo.php

<?php
/*Cria uma conexão com banco se não não funciona*/

if (isset($_POST['action'])) {
    $action = antiSQL($_POST['action']);
    $acao = antiSQL($_GET['acao']);
    
    switch ($action) {
        case 'getUsuarios':
         
            $sql = "SELECT id, nome FROM usuarios";
            $result = mysqli_query($conn, $sql);

            if (mysqli_num_rows($result) > 0) {
                while ($row = mysqli_fetch_assoc($result)) {
                    echo '<option value="' . $row['id'] . '">' . $row['nome'] . '</option>';
                }
            }
          
        

         
            break;

        case 'getFazendas':
            $usuarioId = $_POST['usuarioId'];
            $sql = "SELECT id, fazenda FROM fazendas WHERE id_usuario = " . intval($usuarioId);
            $result = mysqli_query($conn, $sql);
            echo '<option >Selecione a Fazenda</option>';
            if (mysqli_num_rows($result) > 0) {
                while ($row = mysqli_fetch_assoc($result)) {
                    echo '<option value="' . $row['id'] . '">' . $row['fazenda'] . '</option>';
                }
            }
            break;

        case 'getLotes':
            $fazendaId = $_POST['fazendaId'];
            $sql = "SELECT id, lote FROM lotes WHERE id_fazenda = " . intval($fazendaId);
            $result = mysqli_query($conn, $sql);
            echo '<option >Selecione o Lote</option>';
            if (mysqli_num_rows($result) > 0) {
                while ($row = mysqli_fetch_assoc($result)) {

                    echo '<option value="' . $row['id'] . '">' . $row['lote'] . '</option>';
                }
            }
            break;

        case 'getTalhaos':
            $loteId = $_POST['loteId'];
            echo '<option >Selecione o Talhão</option>';
            $sql = "SELECT id, talhao FROM talhoes WHERE id_lote = " . intval($loteId);
            $result = mysqli_query($conn, $sql);
            if (mysqli_num_rows($result) > 0) {
                while ($row = mysqli_fetch_assoc($result)) {
                    echo '<option value="' . $row['id'] . '">' . $row['talhao'] . '</option>';
                }
            }
            break;
    }
}

mysqli_close($conn);
?>

Entrar

Como interligar 4 Selects um dependente do outro?

Postagens Recomendadas

admtwbful

Link to comment

Compartilhe em outros sites

admtwbful

Link to comment

Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Crie a sua conta

Entrar

Você também pode se interessar por:

Como fazer select mysqli com 2 tabelas diferentes e um total?

Criar Instrução SQL entre 2 tabelas

Criar um formulário em HTML e utilizar uma estrutura de repetição em PHP.

Como gerar tabela de resultados mês a mês na calculadora de juros compostos em JS?

Erro no desenvolvimento de página web usando o banco de dados MySQL através do XAMPP

Quem está online 8 Membros, 0 Anônimos, 120 Visitantes (Ver lista completa)

Próximos Eventos

Estatísticas de Membros

Fórum

Programa de Indicação CdD

Cursos

CdD

Mais