How do I fix Javascript to make it work before I choose an option in my select?

Asked

Viewed 53 times

3

Hi I have my page code

<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>

in a separate javascript file I have the following code

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

What is happening is that, is appearing all div and only when I choose one that hides the other div and appears the correct one, but the correct one would be when loading the page hide all div and only appear when selected. Apparently there’s something wrong with my javascript code

javascript html

  • "Apparently there is something wrong with my java code"... Javascript is very different from Java. (Javascript is for wine as well as Java is for sanitary water Hahahahahaha)

  • Your code is right and maybe the problem jquery, follows below the example of pure javascript. Jquery: http://codepen.io/KingRider/pen/KNVxwN and Javascript Pure: http://codepen.io/KingRider/pen/mOVGMd

2 answers

4


The easiest way to achieve this is in css display:none; to all of them:

$(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 that you can also instead of declaring display: none in css, you can in JS, just before delegating the event change write down $('#colors div').hide();

  • Thank you very much, thank you very much.

  • You’re welcome @Junior. I’m glad you decided

  • Again doubt if I tried to repeat the same code for a second select, even if I change the id, the second select modifies the div Colors and not the new one I created, you know tell me pq?

  • I can’t without seeing the code @Junior , but maybe it’s because it has some repeated id, it should never have repeated id’s

0

Maybe your jquery is not legal or defective, use pure javascript (no jquery) is following code below:

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>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.