title: How to hide/show select boxes depending on other choosed select box option?
body: <p>Im a newbie in javascript and i really aprecciate any ideas of how i can do this...</p>
  
  <p>I have one select box. Depending on the option i choose, the other select boxes that are supposed to be "invisible" one of them becomes visible.</p>
  
  <p>I dont want to use jquery, because im still a newbie in js.</p>
  
  <p>Sorry for my english :P</p>
  
  <p>I will put some code for give the example:</p>
  
  <pre><code>&lt;select id="tipos_evento"&gt;
          &lt;option value=""&gt;choose an option to see the corresponding select box&lt;/option&gt;
           &lt;option value="tipoe01"&gt;option_one&lt;/option&gt;
           &lt;option value="tipoe02"&gt;option_two&lt;/option&gt;
           &lt;option value="tipoe03"&gt;ssss&lt;/option&gt;
           &lt;option value="tipoe04"&gt;ddd&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="option_one"&gt;
          &lt;option value=""&gt;ss&lt;/option&gt;
           &lt;option value="c"&gt;Cffs&lt;/option&gt;
           &lt;option value="d"&gt;s&lt;/option&gt;
           &lt;option value="tipoe03"&gt;ssss&lt;/option&gt;
           &lt;option value="tipoe04"&gt;ddd&lt;/option&gt;
  &lt;/select&gt;
  
      &lt;select id="option_two"&gt;
          &lt;option value=""&gt;ss&lt;/option&gt;
           &lt;option value="c"&gt;Cffs&lt;/option&gt;
           &lt;option value="d"&gt;s&lt;/option&gt;
           &lt;option value="tipoe03"&gt;ssss&lt;/option&gt;
           &lt;option value="tipoe04"&gt;ddd&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>But i think the challenge for me is to show the one that i choosed and to hide the other ones...
  Thank u for the replies</p>
  
  <p>Ive been trying to work out the Justin Johnson function, but it didnt work for internet explorer 7 and 8.</p>
  
  <p>I will post the code for anyone that can help me.
  Ive changed the <code>style.display = "none"; for</code>style.cssText='display: none';<code>
  </code>but only worked when the page loaded. Now when i change the select box, nothing happens.</p>
  
  <p>Here is the code(its big, i will optimize it with loops when this works):</p>
  
  <pre><code>var attachEvento = function(node, event, listener, useCapture) {
    // Method for FF, Opera, Chrome, Safari
    if (window.addEventListener ) {
      node.addEventListener(event, listener, useCapture || false);
    }
    // IE has its own method
    else {
      node.attachEvent('on'+event, listener);
    }
  };
  
  
  // Once the window loads and the DOM is ready, attach the event to the main
  attachEvento(window, "load", function() {
    var main_select = document.getElementById("tipos_evento");
  
     var option1 = document.getElementById("temas_conferencias"),
           option2 = document.getElementById("temas_cursos"),
           option3 = document.getElementById("temas_provas"),
           option4 = document.getElementById("temas_visitas"),
           option5 = document.getElementById("temas_ciencias"),
           option6 = document.getElementById("temas_dancas"),
           option7 = document.getElementById("temas_exposicoes"),
           option8 = document.getElementById("temas_multi"),
           option9 = document.getElementById("temas_musica"),
           option10 = document.getElementById("temas_teatro"),
           option11 = document.getElementById("temas_cultura"),
           option12 = document.getElementById("temas_desporto"),
           option13 = document.getElementById("temas_todos");
  
  
         option1.style.cssText='display: none';
         option2.style.cssText='display: none';
         option3.style.cssText='display: none';
         option4.style.cssText='display: none';
         option5.style.cssText='display: none';
         option6.style.cssText='display: none';
         option7.style.cssText='display: none';
         option8.style.cssText='display: none';
         option9.style.cssText='display: none';
         option10.style.cssText='display: none';
         option11.style.cssText='display: none';
         option12.style.cssText='display: none';
         option13.style.cssText='display: block';
  
    var selectHandler = function() {
  
       // Show and hide the appropriate select's
       switch(this.value) {
         case "8":
         // Conferências / colóquios
         option1.style.display = "";
         option2.style.display = "none";
         option3.style.display = "none";
         option4.style.display = "none";
         option5.style.display = "none";
         option6.style.display = "none";
         option7.style.display = "none";
         option8.style.display = "none";
         option9.style.display = "none";
         option10.style.display = "none";
         option11.style.display = "none";
         option12.style.display = "none";
         option13.style.display = "none";
         break;
         case "10":
         // Cursos/workshops
         option1.style.cssText='display: none';
         option2.style.cssText='display: block';
         option3.style.cssText='display: none';
         option4.style.cssText='display: none';
         option5.style.cssText='display: none';
         option6.style.cssText='display: none';
         option7.style.cssText='display: none';
         option8.style.cssText='display: none';
         option9.style.cssText='display: none';
         option10.style.cssText='display: none';
         option11.style.cssText='display: none';
         option12.style.cssText='display: none';
         option13.style.cssText='display: none';
         break;
         case "7":
         // provas
         option1.style.cssText='display: none';
         option2.style.cssText='display: none';
         option3.style.cssText='display: block';
         option4.style.cssText='display: none';
         option5.style.cssText='display: none';
         option6.style.cssText='display: none';
         option7.style.cssText='display: none';
         option8.style.cssText='display: none';
         option9.style.cssText='display: none';
         option10.style.cssText='display: none';
         option11.style.cssText='display: none';
         option12.style.cssText='display: none';
         option13.style.cssText='display: none';
         break;
         case "9":
         // visitas/observações
         option1.style.cssText='display: none';
         option2.style.cssText='display: none';
         option3.style.cssText='display: none';
         option4.style.cssText='display: block';
          option5.style.cssText='display: none';
         option6.style.cssText='display: none';
         option7.style.cssText='display: none';
         option8.style.cssText='display: none';
         option9.style.cssText='display: none';
         option10.style.cssText='display: none';
         option11.style.cssText='display: none';
         option12.style.cssText='display: none';
         option13.style.cssText='display: none';
         break;
         case "12":
         // ciencia
         option1.style.cssText='display: none';
         option2.style.cssText='display: none';
         option3.style.cssText='display: none';
         option4.style.cssText='display: none';
         option5.style.cssText='display: block';
         option6.style.cssText='display: none';
         option7.style.cssText='display: none';
         option8.style.cssText='display: none';
         option9.style.cssText='display: none';
         option10.style.cssText='display: none';
         option11.style.cssText='display: none';
         option12.style.cssText='display: none';
         option13.style.cssText='display: none';
         break;
         case "2":
         // danças
         option1.style.cssText='display: none';
         option2.style.cssText='display: none';
         option3.style.cssText='display: none';
         option4.style.cssText='display: none';
         option5.style.cssText='display: none';
         option6.style.cssText='display: block';
         option7.style.cssText='display: none';
         option8.style.cssText='display: none';
         option9.style.cssText='display: none';
         option10.style.cssText='display: none';
         option11.style.cssText='display: none';
         option12.style.cssText='display: none';
         option13.style.cssText='display: none';
         break;
         case "1":
         // exposiçoes
         option1.style.cssText='display: none';
         option2.style.cssText='display: none';
         option3.style.cssText='display: none';
         option4.style.cssText='display: none';
         option5.style.cssText='display: none';
         option6.style.cssText='display: none';
         option7.style.cssText='display: block';
         option8.style.cssText='display: none';
         option9.style.cssText='display: none';
         option10.style.cssText='display: none';
         option11.style.cssText='display: none';
         option12.style.cssText='display: none';
         option13.style.cssText='display: none';
         break;
         case "3":
         // multi
         option1.style.cssText='display: none';
         option2.style.cssText='display: none';
         option3.style.cssText='display: none';
         option4.style.cssText='display: none';
         option5.style.cssText='display: none';
         option6.style.cssText='display: none';
         option7.style.cssText='display: none';
         option8.style.cssText='display: block';
         option9.style.cssText='display: none';
         option10.style.cssText='display: none';
         option11.style.cssText='display: none';
         option12.style.cssText='display: none';
         option13.style.cssText='display: none';
         break;
         case "4":
         // musica
         option1.style.cssText='display: none';
         option2.style.cssText='display: none';
         option3.style.cssText='display: none';
         option4.style.cssText='display: none';
         option5.style.cssText='display: none';
         option6.style.cssText='display: none';
         option7.style.cssText='display: none';
         option8.style.cssText='display: none';
         option9.style.cssText='display: block';
         option10.style.cssText='display: none';
         option11.style.cssText='display: none';
         option12.style.cssText='display: none';
         option13.style.cssText='display: none';
         break;
         case "5":
         // teatro
         option1.style.cssText='display: none';
         option2.style.cssText='display: none';
         option3.style.cssText='display: none';
         option4.style.cssText='display: none';
         option5.style.cssText='display: none';
         option6.style.cssText='display: none';
         option7.style.cssText='display: none';
         option8.style.cssText='display: none';
         option9.style.cssText='display: none';
         option10.style.cssText='display: block';
         option11.style.cssText='display: none';
         option12.style.cssText='display: none';
         option13.style.cssText='display: none';
         break;
         case "6":
         // Cultura(outros)
         option1.style.cssText='display: none';
         option2.style.cssText='display: none';
         option3.style.cssText='display: none';
         option4.style.cssText='display: none';
         option5.style.cssText='display: none';
         option6.style.cssText='display: none';
         option7.style.cssText='display: none';
         option8.style.cssText='display: none';
         option9.style.cssText='display: none';
         option10.style.cssText='display: none';
         option11.style.cssText='display: block';
         option12.style.cssText='display: none';
         option13.style.cssText='display: none';
         break;
         case "48":
         // Desporto
         option1.style.cssText='display: none';
         option12.style.cssText='display: block';
          option2.style.cssText='display: none';
         option3.style.cssText='display: none';
         option4.style.cssText='display: none';
          option5.style.cssText='display: none';
         option6.style.cssText='display: none';
         option7.style.cssText='display: none';
         option8.style.cssText='display: none';
         option9.style.cssText='display: none';
         option10.style.cssText='display: none';
         option11.style.cssText='display: none';
         option13.style.cssText='display: none';
         break;
         default:
         // Hide all
         option1.style.cssText='display: none';
         option2.style.cssText='display: none';
         option3.style.cssText='display: none';
         option4.style.cssText='display: none';
          option5.style.cssText='display: none';
         option6.style.cssText='display: none';
         option7.style.cssText='display: none';
         option8.style.cssText='display: none';
         option9.style.cssText='display: none';
         option10.style.cssText='display: none';
         option11.style.cssText='display: none';
         option13.style.cssText='display: block';
       }
    };
  
    // Use the onchange and onkeypress events to detect when the
    // value of main_select has changed
    attachEvento(main_select, "change", selectHandler);
    attachEvento(main_select, "keypress", selectHandler);
  });
  </code></pre>