Select para mostrar e esconder div com JQuery e HTML5
21/09/2016Nesta vÃdeo-aula ensinaremos como criar um select para esconder e mostrar as divs, assim quando o usuário escolher uma opção do select aparecerá um conteúdo especÃfico.
No desenvolvimento utilizaremos HTML5 e JQuery.
Nesse projeto teremos 04 arquivos:
1 - index.php
2 - Javascript.js
3 - JQuery
4 - Stylesheet.css
O nosso arquivo index.php ficará da seguinte maneira:
<!doctype html>
<html lang="pt-br">
<head>
<title>Select para mostrar e esconder divs</title>
<link rel="stylesheet" href="Stylesheet.css">
<script src="JQuery.js"></script><!--Versão 3.1.0-->
<script src="Javascript.js"></script>
</head>
<body>
<div class="Container">
<form action="#">
<select name="SelectOptions" id="SelectOptions" required>
<option value="">Selecione</option>
<option value="Div1">Div 1</option>
<option value="Div2">Div 2</option>
<option value="Div3">Div 3</option>
</select>
</form>
<div class="DivPai">
<div class="Div1">
Qualquer Texto
</div>
<div class="Div2">
<img src="Images/Farol.jpg" alt="Foto">
</div>
<div class="Div3">
Outro texto
</div>
</div>
</div>
</body>
</html>No código acima, iniciamos instalando o JQuery (caso não tenha o arquivo do JQuery, baixe no site da JQuery). Instalaremos também nosso arquivo Javascript.js que será o arquivo responsável por executar os scripts e nossa folha de estilos Stylesheet.css.
Posteriormente criaremos nosso select com 03 opções quaisquer. Após o select, criaremos 03 divs com o nome das classes iguais o value das nossas opções do select. � muito importante que sejam iguais para facilitar a exibição por parte do JQuery.
No nosso arquivo Stylesheet.css, apenas esconderemos nossas divs.
.Div1,.Div2,.Div3{display:none;}O nosso Javascript.js ficará assim:
//Funções após a leitura do documento
$(document).ready(function() {
//Select para mostrar e esconder divs
$('#SelectOptions').on('change',function(){
var SelectValue='.'+$(this).val();
$('.DivPai div').hide();
$(SelectValue).toggle();
});
});No nosso script javascript, pegaremos o value do nosso select através do evento change, colocaremos esse value na variável SelectValue e de posse desse valor exibiremos a div que tenha a mesma classe do valor do select.
Bem simples né? Abraços!
Posts Relacionados
