如何根据其他选择的选择框选项隐藏/显示选择框？ [英] How to hide/show select boxes depending on other choosed select box option?
本文介绍了如何根据其他选择的选择框选项隐藏/显示选择框？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是javascript的新手，我真的想知道如何做到这一点......
我有一个选择框。根据我选择的选项，其他选择框应该是不可见的其中一个变得可见。
我不想使用jquery，因为我仍然js中的新手。
对不起我的英文：P
我会提供一些代码来举例说明：
< select id =tipos_evento>
< option value =>选择一个选项以查看相应的选择框< / 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>
但我认为我面临的挑战是展示我选择的那个并隐藏其他的...
感谢您的回复
我一直在努力研究Justin Johnson功能，但它对于Internet Explorer 7和8没有用。 / p>
我会为任何可以帮助我的人发布代码。
我改变了 style.display =none; for style.cssText ='display：none'; 但仅在加载页面时有效。现在，当我更改选择框时，没有任何反应。
这是代码（它的大，我将在循环时使用循环优化它）：
var attachEvento = function（node，event，listener，useCapture）{
// FF，Opera，Chrome，Safari $ b的方法$ b if（window.addEventListener）{
node.addEventListener（event，listener，useCapture || false）;
}
// IE有自己的方法
else {
node.attachEvent（'on'+ event，listener）;
}
};
//一旦窗口加载并且DOM准备就绪，将事件附加到主
attachEvento（窗口，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_desp orto），
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（）{
//显示并隐藏相应的select
开关（this.value）{
case8 ：
//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;
休息;
case10：
// Cursos / workshop
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';
休息;
case7：
// 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';
休息;
case9：
// 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';
休息;
case12：
// 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';
休息;
case2：
//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';
休息;
case1：
//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';
休息;
case3：
// 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';
休息;
case4：
// 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';
休息;
case5：
// 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';
休息;
case6：
// 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';
休息;
case48：
// 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';
休息;
默认值：
//隐藏所有
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';
}
};
//使用onchange和onkeypress事件检测main_select的
//值何时更改
attachEvento（main_select，change，selectHandler）;
attachEvento（main_select，keypress，selectHandler）;
}）;
解决方案
我通常使用mootools，但这应该是通用的。但是，我无法谈论跨浏览器问题。
< 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>
函数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';
}
}
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);
});
解决方案
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';
}
}
这篇关于如何根据其他选择的选择框选项隐藏/显示选择框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
