1

Tenho que criar um dropdown que mostrará uma div com um botão para cada opção do dropdown. Por enquanto tenho os divs (tenho que fazer mais) e o dropdown, mas não tenho o JS para mostrar e ocultar. Vai ficar só um a mostra.

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> TESTE </title>
</head>
<body>
    <label>Qual a sua cidade?</label>
    <select class="cat_dropdown" id="Cidade" name="Cidade">
    <option value="Florianopolis - sc">Florianópolis - SC</option>
    <option value="Joinville - sc">Joinville - SC</option>
    <option value="são josé - sc">São Joosé - SC</option>
    <option value="rio de janeiro - rj">Rio de Janeiro - RJ</option>
    <option value="porto alegre - rs">Porto Alegre - RS</option>
    </select>
<div id="Joinville - sc">    
<!-- INICIO FORMULARIO BOTAO PAGSEGURO -->
<form action="https://pagseguro.uol.com.br/v2/pre-approvals/request.html" method="post">
<!-- NÃO EDITE OS COMANDOS DAS LINHAS ABAIXO -->
<input type="hidden" name="code" value="6A2E84B72424217224353F91FCC1386A" />
<input type="image" src="http://beerkingstore.com.br/media/wysiwyg/bkclub/joinville-SC.png" name="submit" alt="Pague com PagSeguro - é rápido, grátis e seguro!" />
</form>
<!-- FINAL FORMULARIO BOTAO PAGSEGURO -->
</div>

<div id="rio de janeiro - rj">    
<!-- INICIO FORMULARIO BOTAO PAGSEGURO -->
<form action="https://pagseguro.uol.com.br/v2/pre-approvals/request.html" method="post">
<!-- NÃO EDITE OS COMANDOS DAS LINHAS ABAIXO -->
<input type="hidden" name="code" value="673830C750500BEDD4299F8B357559B9" />
<input type="image" src="http://beerkingstore.com.br/media/wysiwyg/bkclub/ASSINE-RJ-RJ.png" name="submit" alt="Pague com PagSeguro - é rápido, grátis e seguro!" />
</form>
<!-- FINAL FORMULARIO BOTAO PAGSEGURO -->
</div>

<div id="porto alegre - rs">
<!-- INICIO FORMULARIO BOTAO PAGSEGURO -->
<form target="pagseguro" action="https://pagseguro.uol.com.br/v2/pre-approvals/request.html" method="post">
<!-- NÃO EDITE OS COMANDOS DAS LINHAS ABAIXO -->
<input type="hidden" name="code" value="1C52DCC32E2E6B1884B18F8740EB45F2" />
<input type="image" src="http://beerkingstore.com.br/media/wysiwyg/bkclub/assine-poa.png"     name="submit" alt="Pague com PagSeguro - é rápido, grátis e seguro!" />
</form>
<!-- FINAL FORMULARIO BOTAO PAGSEGURO -->
</div>

</body>
</html>
1
  • 1
    Túlio, tem alguma framework como jQuery ou MooTools? ou prefere javascript puro?
    – Sergio
    Commented 6/05/2014 às 14:53

1 Resposta 1

2

Seria prático ter no seu HTML uma classe para todas as divs/cidades. Assim seria bem mais fácil selecionar todas essas divs

<div id="Joinville - sc" class="divcidade"> 

Para usar javascript simples pode usar assim

var select = document.querySelector('select#Cidade');
var cidades = document.querySelectorAll('.divcidade');

function esconder() {
    for (var i = 0; i < cidades.length; i++) {
        cidades[i].style.display = 'none';
    };
}

select.addEventListener('change', function () {
    esconder()
    var id = this.options[this.selectedIndex].value;
    document.getElementById(id).style.display = 'block';
});

esconder();

Exemplo

Esta solução funciona assim:

  • selecionar o select e guardar numa variável, e o mesmo com as divs das cidades
  • cria uma função que percorre todas as divs e as esconde
  • amarrar um event handler para correr codigo quando o select mudar
  • [quando o select mudar] esconder todas as divs e logo depois mostrar só aquela que tem o ID certo. Para isso usei o valor da option para selecionar um novo elemento por ID

Se não quiser mudar o HTML, pode usar assim também para gerar a array cidades:

var cidades = [];

for (var i = 0; i < select.options.length; i++) {
    var id = select.options[i].value;
    var estaCidade = document.getElementById(id);
    estaCidade && cidades.push(estaCidade)
}

Exemplo

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 .