Programação

dropdown com sim/não para exibir o conteúdo

Salve salve planeta Terra, estou aqui novamente com um tutorial fácil e bacana pra você, dropdown com sim/não para exibir o conteúdo. Mas porque você precisaria de algo desse tipo no meu site/blog? Imagine que você tem um formulário e alguns campos só são exibidos pra determinadas pessoas, então poderíamos ocultar esses campos e só exibir quando necessário, no exemplo temos a pergunta: Você tem ensino superior? Se a opção for sim, abre um novo input com a pergunta: Qual curso?

Clique aqui e veja o exemplo

dropdown com sim/não para exibir o conteúdo

Passo 1: O HTML

No exemplo, usamos um dropdown com as opções sim e não, além da opção default Selecione uma opção, então nosso select ficou assim:

<label>Você tem ensino superior?</label><br />
<select name="sim_nao" class="mf_select" id="exibir_esconder">
<option value="default" name="sim_nao" checked>Selecione uma opcão</option>
<option value="0" name="sim_nao" >Não</option>
<option value="1" name="sim_nao" >Sim</option>
</select>

Pronto, agora nosso dropdown (select) está pronto, então vamos criar o HTML do conteúdo que será exibido, dependendo da escolha no dropdown.

No exemplo, se a opção for Sim exibe um novo input para inserir qual curso, então nosso código ficou assim:

<p id="sim_nao">Qual curso? <input type="text" name="curso" id="curso" /></p>

Repare no id #sim_nao do elemento < p >, pois criaremos um CSS pra ocultar esse #sim_nao e também usaremos ele como referência no nosso JS.

Passo 2: O CSS

Como dito no passo anterior, vamos criar um CSS específico pro #sim_nao usado no elemento que será exibido/ocultado dependendo da opção escolhida no dropdown.

/* CSS DO CONTEÚDO A SER EXIBIDO/OCULTADO */
#sim_nao {
    display:none; /* POR PADRÃO COMEÇA OCULTO */
    background-color:#efefef;
    width:100%;
    float:left;
    margin-top:15px;    
}

É isso, agora pra finalizarmos dropdown com sim/não para exibir o conteúdo, basta criarmos o JS.

Passo 3: O javascript

Nosso código, ficou mais ou menos assim:

<script type="text/javascript">
var select = document.getElementById('exibir_esconder'), // #ID DO SELECT
onChange = function(event) {
var shown = this.options[this.selectedIndex].value == 1;
document.getElementById('sim_nao').style.display = shown ? 'block' : 'none'; //#ID DO ELEMENTO A SER EXIBIDO/OCULTADO
};
if (select.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}
</script>

- Na linha 2 o exibir_esconder corresponde ao id do select criado no passo 1.
- Na linha 3 verificamos se o value do option é 1 que corresponde a opção sim do select criado no passo 1.
- Na linha 4 usamos o sim_nao que é o id do elemento oculto/que será exibido caso a opção do dropdown seja sim.

Pronto, agora se você seguiu todos os passos desse tutorial, você já deve ter o seu dropdown com sim/não para exibir o conteúdo, funcionando e com a formatação igual ao do exemplo.

Clique aqui e veja o exemplo
Clique aqui e veja o código completo no GitHub
Clique aqui e faça download do arquivo do exemplo.

E você, o que achou do tutorial dropdown com o sim/não para exibir o conteúdo? Fácil? Ficou com dúvidas? Comente.

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    Envie seu comentário.

    Seu email não será publicado