Question

98

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

rated 0 times [ 103] [ 5] / answers: 1 / hits: 33347 / 15 Years ago, thu, august 6, 2009, 12:00:00

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

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

irvingcarloe

Add To Favorites

Follow

Total Points: 677

Total Questions: 109

Total Answers: 96

Location: Svalbard and Jan Mayen

Member since Sun, Sep 25, 2022

2 Years ago

irvingcarloe questions

1 Is it better to use multiple states or one state object in React?

Wed, Aug 10, 22, 00:00, 2 Years ago

1 Tailwind classes not working after page refresh in production

Fri, Jun 4, 21, 00:00, 3 Years ago

1 Event listener for dataLayer push events on Tag Manager JS

Wed, Mar 31, 21, 00:00, 3 Years ago

1 Convert file to Base64

Tue, Aug 4, 20, 00:00, 4 Years ago

1 How to autoplay audio in any browser?

Fri, Jul 3, 20, 00:00, 4 Years ago

View All

answered 15 Years ago kylee · Accepted Answer

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

  }

}