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.
-
Pode por favor publicar os selects e como está sendo feito hoje ?– Lucas BrogniCommented 15/06/2018 às 13:01
-
2Possível duplicata de Como selecionar uma opção em um <select> e carregar dados relacionados em outro?– NoobSaibotCommented 15/06/2018 às 13:15
-
Não se esqueça de fazer um tour por i.sstatic.net/evLUR.png e também por pt.meta.stackoverflow.com/questions/1078/…– user60252Commented 15/06/2018 às 14:59
Adicione um comentário
|
2 Respostas
pagina_qq_nome.php
Necessário biblioteca Jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
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(); } } }); }); });
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();
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>
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.
-
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– rbzCommented 15/06/2018 às 13:23
-