How to fix JavaScript so that it works before I choose an option in my select?

Question

How to fix JavaScript so that it works before I choose an option in my select?

Navigation

#1 by (4 votes)
#2 by (0 votes)

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 that, is appearing all the 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 the div and only appear when they are selected. Apparently something is wrong with my javascript code

javascript html

asked by anonymous 11.11.2016 / 11:51

2 answers

0

Maybe your jquery is not legal or defective, use pure javascript (without jquery) and follow 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>

11.11.2016 / 12:29

Format date in INSERT and UPDATE Mysql PHP Make word search within a list and return ordered tuples in PYTHON

score 4 · Accepted Answer

The easiest way to accomplish 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><selectclass="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 $('#colors div').hide();