1

Estou com o seguinte código:

HTML:

<select class="form-control btn-form" id="select-category">
      <option selected hidden>Selecione uma categoria:</option>
      <option value="anu1">Anunciante1</option>
      <option value="anu2">Anunciante/option>
      <option value="anu3">Anunciante3</option>
</select>

JS:

$('#select-category').change(function(){
  if($(this).val() == 'anu1'){     
      document.getElementById('alert-anu-1').style.display='block';   
  }

  if($(this).val() == 'anu2'){ 
    document.getElementById('alert-anu-2').style.display='block';
  }
  if($(this).val() == 'anu3'){ 
    document.getElementById('alert-anu-3').style.display='block';
  }
});

A ideia é ter uma lista e depois quando o usuário selecionar uma opção mostrar um "alert" em bootstrap. Ou seja, se o usuário selecionar o valor "anu1", mostra o alert "alert-anu-1", isso até então está funcionando. O que não estou conseguindo é limpar os valores.

Ex: se selecionar o valor anu1, mostra ele, mas se selecionar o valor anu2, tem que limpar o alert do anu1 e mostrar apenas o do anu2 e assim por diante.... Como poderia fazer isso?

2 Respostas 2

1

Acho que basta algo como:

var alerts = $('[id^="alert-anu-"]');
$('#select-category').change(function() {
    alerts.hide();
    $('#alert-' + this.value).show();
});

Assim quando o select muda ele esconde todos os alertas e mostra só o que foi escolhido. Criei a variável alerts para ter esses elementos em cache e evitar ir ao DOM buscá-los muitas vezes.

3
  • Gostei desse jeito, mas não consigo executar. Os meus alerts e os meus valores estão escritos e não estão numerados como no exemplo. Commented 13/03/2016 às 15:17
  • O meu alert é tipo: <div id="alert-anunciante-one" class="alert alert-info alert-dismissible" role="alert"> <strong>PetBusca.</strong> Ferramenta bacana.... <a href="#" title="Saiba Mais">Saiba mais...</a>. </div> Commented 13/03/2016 às 15:17
  • @HitchLeonardo não faz diferênça se usas outros nomes para as IDs. Nesse caso podes usar var alerts = $('[id^="alert-anunciante-"]');, a chave aqui é ^= que indica ID começando com "xxx". Se quiseres um exemplo a funcionar junta um jsFiddle ou o código todo na pergunta.
    – Sergio
    Commented 13/03/2016 às 18:45
1

Você não esta tirando o display, quando coloca com o display = "block" é preciso colocar display = "none", assim vai esconder a mensagem.

$('#select-category').change(function(){
    for(var x=1;x<=3;x+=1) //apaga as 3 mensagens
        document.getElementById('alert-anu-'+x).style.display='none';

    if($(this).val() == 'anu1'){     
        document.getElementById('alert-anu-1').style.display='block';   
    }
    /*...*/
});

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 .