2

Tenho uma base de dados onde são armazenadas informações a partir do ano. No site tenho 2 Selects, um para ano e um para os arquivos daquele ano, atualmente faço isso com JS mas queria passar para mysql, daí queria saber como faço para por exemplo se eu selecionar 2018 no primeiro select exibir no segundo select apenas os arquivo daquele respectivo ano. Não tenho muito conhecimento nessa área, ontem dei uma googlada, tentei algumas ideias, consigo preencher os campos com os dados mas não consegui fazer essa filtragem por ano de jeito alum. Aceito qualquer ajuda. Ps. todas as informações estão armazenadas na mesma tabela.

3

2 Respostas 2

1

pagina_qq_nome.php

  1. Necessário biblioteca Jquery

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
  2. Script

    $(document).ready(function() {
      $('#ano').on('change', function() {
        $.ajax({
            type: 'POST',
            url: 'lista_arquivos.php',
            data: {'ano': $('#ano').val()},
            // Antes de carregar os registros, mostra para o usuário que está
            // sendo carregado.
            beforeSend: function(xhr) {
                $('#arquivo').attr('disabled', 'disabled');
                if ($('#ano').val() !== 'ano') {
                   $('#arquivo').html('<option value="">Carregando...</option>');
                }else{
                   $('#arquivo').html('<option value="">Arquivo</option>');
                }
            },
            // Após carregar, coloca a lista dentro do select de arquivos.
            // Após carregar, coloca a lista dentro do select de arquivos.
            success: function(data) {
                if ($('#ano').val() !== '') {
                    // Adiciona o retorno no campo, habilita e da foco
                    $('#arquivo').html('<option value="">Selecione</option>');
                    $('#arquivo').append(data);
                    $('#arquivo').removeAttr('disabled').focus();
                }
            }
        });
      });
    
    });
    
  3. PHP

    $hostname="localhost";  
    $username="USUARIO";  
    $password="SENHA";  
    $db = "nome_DB";  
    $conexao = new PDO("mysql:host=$hostname;dbname=$db", $username, $password);
    
      $sqlano = 'SELECT * FROM anos GROUP BY ano ORDER BY ano ASC';
      $resano = $conexao->prepare($sqlano);
      $resano->execute();
      $anos = $resano->fetchAll();
    
  4. HTML

         <select name="ano" id="ano" required>
               <option value="ano">Ano</option>
             <?php foreach ($anos as $ano) { ?>
               <option value="<?php echo $ano['ano'] ?>"><?php echo $ano['ano'] ?></option>
             <?php } ?>
         </select>
    
            <select name="arquivo" id="arquivo" disabled required>
              <option value="">Arquivo</option>
            </select>
    

lista_arquivos.php

$hostname="localhost";  
$username="USUARIO";  
$password="SENHA";  
$db = "nome_DB";  

$conexao = new PDO("mysql:host=$hostname;dbname=$db", $username, $password);

$postAno = $_POST['ano'];

$sql = "SELECT * FROM anos WHERE ano = '$postAno' ORDER BY ano ASC";
$resArquivo = $conexao->prepare($sql);
$resArquivo->execute();
$arquivos = $resArquivo->fetchAll();
?>

<?php foreach ($arquivos as $row) { ?>
    <option value="<?php echo $row['arquivo'] ?>"><?php echo $row['arquivo'] ?></option>
<?php } ?>

Se preferir mostrar o select dos arquivos após ter selecionado o ano:

Script

$(document).ready(function() {
$("#arquivo").hide();
    $('#ano').on('change', function() {
        $.ajax({
            type: 'POST',
            url: 'lista_arquivos.php',
            data: {'ano': $('#ano').val()},
            // Antes de carregar os registros, mostra para o usuário que está
            // sendo carregado.
            beforeSend: function(xhr) {
                if ($('#ano').val() !== 'ano') {
                   $('#arquivo').html('<option value="">Carregando...</option>');
                }else{
                   $("#arquivo").hide();
                }
            },
            // Após carregar, coloca a lista dentro do select de arquivos.
            success: function(data) {
                if ($('#ano').val() !== 'ano') {
                    // Adiciona o retorno no campo, habilita e da foco
                    $('#arquivo').html('<option value="">Selecione</option>');
                    $('#arquivo').append(data);
                    $("#arquivo").show()
                    $( "#arquivo" ).focus();

                }
            }
        });
    });

});

O select arquivo

<select name="arquivo" id="arquivo" style="display:none;">
    <option value="">Arquivo</option>
</select>
1
  • É isso! Funciona perfeitamente!!! Muito obrigado! Commented 15/06/2018 às 15:10
-1

Você pode utilizar AJAX para fazer uma requisição e retornar valores do banco de dados com o JS:

ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
    if ((ajax.readyState == 4) && (ajax.status == 200)) {
        document.getElementById("selectArquivos").value = ajax.responseText;
    }
}

ajax.open("GET","buscaNoBanco.php?ano=2018",true);
ajax.send();

No exemplo acima, ele irá executar o arquivo "buscaNoBanco.php" com o GET do ano selecionado no select (2018), que irá buscar no banco de dados os arquivos do ano respectivo. O retorno do arquivo será pela variável ajax.responseText.

2
  • Embora este link possa responder à pergunta, é melhor incluir as partes essenciais da resposta aqui e fornecer o link para referência. As respostas apenas por link podem ser invalidadas se a página com o link for alterada. - Da Revisão
    – rbz
    Commented 15/06/2018 às 13:23
  • Verdade, corrigi na medida do possível Commented 15/06/2018 às 13:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .