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"; for style.display = "none"; for style.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);
});
4 answers
solution1
10 ACCPTED 2009-08-06 17:15:58
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';
}
}
solution2
2 2009-08-06 17:16:22
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 .
solution3
1 2009-08-06 17:15:26
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.
solution4
0 2009-08-06 17:22:58
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how to unhighlight select element after option is choosed?
Show hide select box and select box option based on selection
Change select box value depending other selected option box
Show hide select list depending on other select list value
jQuery show/hide on option select field showing the box I am trying to show on all other options
How do I hide/show HTML input boxes when I toggle HTML Select box values?
on select drop down change hide/show checkboxes depending on option value
Hide/Show Div below select depending on whether an option is selected or not
JavaScript while loop get select option and hide option from other select boxes
show div depending on select option
Related Tags