3

Oi tenho meu código da página

<select class="form-control" id="selected">
    <option selected="selected" value="0">Selecione</option>
    <option value="a">MONTAGEM LATERAL</option>
    <option value="b">MONTAGEM TETO</option>
    <option value="c">MONTAGEM SEMI-EMBUTIDA</option>
    <option value="d">MONTAGEM SOBRE A BASE</option>
</select>

<div id="colors">
 <div id="a">
 <p>a</p>
 </div>
 <div id="b">
 <p>b</p>
 </div>
 <div id="c">
 <p>c</p>
 </div>
 <div id="d">
 <p>d</p>
</div>

em um arquivo javascript separado eu tenho o seguinte código

$(function(){
$("#selected").change(function(){
            $('#colors div').hide();
            $('#'+$(this).val()).show();
        });
});

O que está acontecendo que, está aparecendo todas as div e somente quando eu escolho uma que oculta as outras div e aparece a correta, mas o correto seria ao carregar a página ocultar todas as div e só aparecer quando for selecionadas. Aparentemente tem algo errado com meu código do javascript

2
  • "Aparentemente tem algo errado com meu código do java"... JavaScript é muito diferente de Java. (Javascript esta para vinho, bem como Java esta para agua sanitária Hahahahahaha)
    – MarioAleo
    Commented 11/11/2016 às 11:10
  • Seu código esta certo e talvez a problema jquery, segue abaixo o exemplo de javascript puro. Jquery: codepen.io/KingRider/pen/KNVxwN e Javascript Puro: codepen.io/KingRider/pen/mOVGMd
    – KingRider
    Commented 11/11/2016 às 11:30

2 Respostas 2

4

A maneira mais facil de conseguir isso é nos css display:none; a todas elas:

$(function(){
$("#selected").change(function(){
  $('#colors div').hide();
  $('#'+$(this).val()).show();
});
});
#colors div {
  display: none;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="selected">
    <option selected="selected" value="0">Selecione</option>
    <option value="a">MONTAGEM LATERAL</option>
    <option value="b">MONTAGEM TETO</option>
    <option value="c">MONTAGEM SEMI-EMBUTIDA</option>
    <option value="d">MONTAGEM SOBRE A BASE</option>
</select>

<div id="colors">
 <div id="a">
 <p>a</p>
 </div>
 <div id="b">
 <p>b</p>
 </div>
 <div id="c">
 <p>c</p>
 </div>
 <div id="d">
 <p>d</p>
</div>

Note que pode também, em vez de declarar display: none nos css, pode no JS, logo antes de delegar o evento change escrever $('#colors div').hide();

4
  • Muito obrigado, valeu mesmo.
    – Junior
    Commented 11/11/2016 às 11:12
  • De nada @Junior . Ainda bem que resolveu
    – Miguel
    Commented 11/11/2016 às 11:12
  • Mais uma duvida se eu tentei repetir os mesmo código para uma segunda select, mesmo eu alterando as id, a segunda select modifica as div colors e não a nova que eu criei, você sabe me dizer pq?
    – Junior
    Commented 11/11/2016 às 14:51
  • Não consigo sem ver o código @Junior , mas talvez seja porque tem algum id repetido, nunca deve ter id's repetidos
    – Miguel
    Commented 11/11/2016 às 14:54
0

Talvez seu jquery não está legal ou defeito, use javascript puro (sem jquery) é segue código abaixo:

var selecao = function() {
  x = document.getElementById("selected").selectedIndex;
  div = document.getElementsByTagName("option")[x].value;
  for (x = 0; x < document.querySelectorAll("div#colors div").length; x++) {
    document.querySelectorAll("div#colors div")[x].style.display = 'none';
  }
  document.querySelector("div#"+div).style.display = 'initial';
}
<select class="form-control" id="selected" onchange="selecao()">
    <option selected="selected" value="0">Selecione</option>
    <option value="a">MONTAGEM LATERAL</option>
    <option value="b">MONTAGEM TETO</option>
    <option value="c">MONTAGEM SEMI-EMBUTIDA</option>
    <option value="d">MONTAGEM SOBRE A BASE</option>
</select>

<div id="colors">
 <div id="a"><p>a</p></div>
 <div id="b"><p>b</p></div>
 <div id="c"><p>c</p></div>
 <div id="d"><p>d</p>
</div>

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 .