ansaurus

Question

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

Answer 1

A:

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.

Rusky 2009-08-06 17:15:26

-1 for obtrusive js. Lets not promote that.

Justin Johnson 2009-08-06 17:16:45

Answer 2

+3 A:

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

Brian Ramsay 2009-08-06 17:15:58

what's the downvote for?

Brian Ramsay 2009-08-06 17:17:29

obtrusive use of javascript. `onchange` should not be in the html

Justin Johnson 2009-08-06 17:24:15

@Justin: for beginners, using the html attributes is much simpler than understanding all the event registration models.

Joel Potter 2009-08-06 17:29:15

If he wants to learn JavaScript, it is even more important that he be shown the proper way of doing things. There's no point in learning antiquated methods that are popularly viewed as wrong.

Justin Johnson 2009-08-06 17:30:27

Answer 3

+2 A:

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.

CMS 2009-08-06 17:16:22

Answer 4

A:

Here's something quick and dirty, using proper event attachment methods (but not tested):

var attachEvent = 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
attachEvent(window, "load", function() {
  var main_select = document.getElementById("tipos_evento");

  var selectHandler = function() {
     var option1 = document.getElementById("option_one"),
         option2 = document.getElementById("option_two");

     // Show and hide the appropriate select's
     if ( this.value == "tipoe1" ) {
       // Show option1, hide option2
       option1.style.display = "";
       option2.style.display = "none";
     } else if ( this.value == "tipoe2" ) {
       // Hide option1, show option2
       option1.style.display = "none";
       option2.style.display = "";
     } else {
       // Hide both
       option1.style.display = "none";
       option2.style.display = "none";
     }
  };

  // Use the onchange and onkeypress events to detect when the 
  // value of main_select has changed
  attachEvent(main_select, "change", selectHandler);
  attachEvent(main_select, "keypress", selectHandler);
});

For an explanation of why you need both onchange and onkeypress, see this question.

Look up the addEventListener and attachEvent methods for more information on browser specific event handling and their differences.

And kudos on not wanting to go with jquery so you can actually learn the language.

Justin Johnson 2009-08-06 17:22:58

What's the down vote for?

Justin Johnson 2009-08-06 17:28:07

Thank u Justin. I didnt tried the code yet, but this hides the other select boxes if one option is choosed?

dutraveller 2009-08-06 17:35:26

I see that you've added example html. I'll change my code to reflect that.

Justin Johnson 2009-08-06 17:38:37

Thanks a lot Justin. One question. Why u didnt use the "var" word to initialize the option2 variable and used on the option1?

dutraveller 2009-08-06 18:11:18

I did ;) Notice that there is a comma in the middle `var option1 = ..., option2 = ...;`

Justin Johnson 2009-08-06 19:12:07

Just two more questions Justin.If i want to add more "option" variables to have more selects, it is just add more vars? I tried to use the switch case but it didnt work..any guide lines??THank u for ur patiente

dutraveller 2009-08-06 20:14:03

1) ya, just more `var optionX = document.getElementBy('option_x');` 2) you should be able to do `switch (this.value) { case "tipeo1": ... break; case "tipeo2": ... break; }` and so on

Justin Johnson 2009-08-06 22:04:23

Hi Justin, ive been testing ur code, and in Internet explorer 7 and 8 the select boxes dont hide.Just to let u know. Thanks

dutraveller 2009-08-07 13:20:59

It has to do with the attachEvent i think. I will search for answers

dutraveller 2009-08-07 13:26:41

for the attachEvent i found the solution. But now, when i change the select box, the function dont work. It doesnt change the select box visibility....

dutraveller 2009-08-07 15:00:32

object.attachEvent is IE's method for attaching events without overwriting previously attached events (as opposed to `object.onsomeevent = function() {};` which will overwrite anything previously set.) `object.addEventListener` is Firefox's equivalent. The function that I wrote, `attachEvent`, which determines the appropriate method to use based on the browser) , perhaps should have been named differently to avoid confusion. Sorry about that. Have you figured out your problem completely yet?

Justin Johnson 2009-08-10 16:13:28

ansaurus

tags:

views:

answers:

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

related questions