如何根据其他选择的选择框选项来隐藏/显示选择框?
我是一个新手在JavaScript和我真的aprecciate如何我可以做到这一点的任何想法...如何根据其他选择的选择框选项来隐藏/显示选择框?
我有一个选择框。根据我选择的选项,应该是其中一个“不可见”的其他选择框变得可见。
我不想使用jquery,因为我仍然是js中的新手。
对不起,我的英语:P
我会放一些代码给出的例子:
<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>
但我觉得对我的挑战是要表明,我选用了一个隐藏其他的... 感谢ü的答复
我一直在试图找出贾斯汀·约翰逊的功能,但它没有工作的Internet Explorer 7和8
我会发布可以帮助我的任何人的代码。 我改变了style.display = "none"; for
style.cssText ='display:none';
但只有当页面加载时才起作用。现在,当我改变选择框时,没有任何反应。
下面是代码(它的大,我将与循环优化的时候,这个工程):
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);
});
我一般使用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>
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';
}
}
什么是downvote? – 2009-08-06 17:17:29
突然使用javascript。 'onchange'不应该在html – 2009-08-06 17:24:15
@Justin:对于初学者来说,使用html属性比理解所有事件注册模型简单得多。 – Joel 2009-08-06 17:29:15
jQuery让事情变得更容易,我们没有理由不使用它。
但无论哪种方式,您需要使用onChange事件来阅读哪些选项被选中,然后设置您想要显示和隐藏的其他框的CSS可见属性。
<select name="sbox" onChange="event()">
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
</select>
然后,
function event() {
switch (sbox.selectedindex) {
case 0:
someOtherSelect.style.visiblity = 'visible';
...
}
}
这个例子假定您已经有了S盒的变量,并在onload事件someOtherSelect设置。
-1为obtrusive js。让我们不要这样做。 – 2009-08-06 17:16:45
可以办理变更事件:
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
}
};
注:在你的编辑,最后两个选择框都为ID属性无效字符。
ID和名称标记必须以 字母开头([A-ZA-Z]),并且可以通过任意数量的字母之后 ,数字([0-9]),连字符( “ - ” ),下划线(“_”),冒号(“:”)和句点(“。”)。
更多信息here。
这里的东西快速和肮脏的,使用合适的事件连接方法(而不是测试):
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);
});
对于为什么需要两个onchange
和onkeypress
的说明,请参阅this question。
查询addEventListener和attachEvent方法以获取有关浏览器特定事件处理及其差异的更多信息。
并不想用jQuery去,所以你可以真正学习语言。
什么是反对票? – 2009-08-06 17:28:07
谢谢你,贾斯汀。我没有尝试过这些代码,但是如果选择了一个选项,这会隐藏其他选择框? – dutraveller 2009-08-06 17:35:26
我看到你已经添加了示例html。我会更改我的代码以反映这一点。 – 2009-08-06 17:38:37
请包括一些代码,以便更精确 – 2009-08-06 17:14:19
嘿,队友,你的元素ID不能有“/”。另外,我从来没有这样做过,所以我不能肯定地说,购买你可能会在ID中使用重音字符时遇到一些问题。任何人都可以评论这个吗? – 2009-08-06 17:37:24
谢谢你我只是插入一些复制/粘贴文本..贾斯汀..在现实中我没有使用:) – dutraveller 2009-08-06 17:37:50