How to hide/show select boxes depending on other choosed select box option?

Question

Im a newbie in javascript and i really aprecciate any ideas of how i can do this...

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.

I dont want to use jquery, because im still a newbie in js.

Sorry for my english :P

I will put some code for give the example:

<select id="tipos_evento">
        <option value="">choose an option to see the corresponding select box</option>
         <option value="tipoe01">option_one</option>
         <option value="tipoe02">option_two</option>
         <option value="tipoe03">ssss</option>
         <option value="tipoe04">ddd</option>
</select>

<select id="option_one">
        <option value="">ss</option>
         <option value="c">Cffs</option>
         <option value="d">s</option>
         <option value="tipoe03">ssss</option>
         <option value="tipoe04">ddd</option>
</select>

    <select id="option_two">
        <option value="">ss</option>
         <option value="c">Cffs</option>
         <option value="d">s</option>
         <option value="tipoe03">ssss</option>
         <option value="tipoe04">ddd</option>
</select>

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

Ive been trying to work out the Justin Johnson function, but it didnt work for internet explorer 7 and 8.

I will post the code for anyone that can help me. Ive changed the style.display = "none"; forstyle.cssText='display: none'; but only worked when the page loaded. Now when i change the select box, nothing happens.

Here is the code(its big, i will optimize it with loops when this works):

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);
});

Answer 1

I generally use mootools, but this should be generic. I can't speak to cross-browser issues, though.

<select id='main_select' onchange='show_select()'>
  <option>1</option>
  <option>2</option>
</select>
<select id='select_1' style='display:none'></select>
<select id='select_2' style='display:none'></select>

function show_select()
{
  var main_select = document.getElementById("main_select");
  var select_1 = document.getElementById("select_1");
  var select_2 = document.getElementById("select_2");

  var desired_box = main_select.options[main_select.selectedIndex].value;
  if(desired_box == 1) {
    select_1.style.display = '';
    select_2.style.display = 'none';
  } else {
    select_2.style.display = '';
    select_1.style.display = 'none';
  }
}

Answer 2

You can handle the change event:

document.getElementById('selectBox').onchange = function () {
  var selectedValue = this.options[this.selectedIndex].value; // get the selected value

  // Depending on the value selected you can show or hide other elements:

  if (selectedValue == "1") { 
    document.getElementById('element1').style.display = 'none';  // hide element1
    document.getElementById('element2').style.display = ''; // show element2
  }
};

Note: In your edit, the last two select boxes have invalid characters for the ID attribute.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

More information here.

Answer 3

jQuery makes things easier, there's no reason not to use it.

But either way, you need to use the onChange event to read which options are selected, and then set the css visible property on the other boxes that you want to show and hide.

<select name="sbox" onChange="event()">
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
</select>

and then,

function event() {
  switch (sbox.selectedindex) {
    case 0:
      someOtherSelect.style.visiblity = 'visible';
    ...
  }
}

This example assumes you already have variables with sbox and someOtherSelect set in the onload event.