使用 Javascript 隐藏元素。不适用于 IE 和 Chrome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6761964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide element with Javascript. Doesn't work with IE and Chrome
提问by Timo
I have problems with hiding elements. I already read this topic Javascript working on Firefox but not in Chrome and IE6but didn't get help from there. Javascript code, what should hide/show textbox and radio buttons:
我有隐藏元素的问题。我已经阅读了这个话题 Javascript 在 Firefox 上工作，但不在 Chrome 和 IE6 中，但没有从那里得到帮助。Javascript 代码，应该隐藏/显示文本框和单选按钮的内容：
function hide1(a)
{
var text1=document.getElementById("text1");
text1.style.visibility = 'visible';
text1.value = a;
document.getElementById("radio1").style.visibility = 'hidden';
document.getElementById("radio2").style.visibility = 'hidden';
document.getElementById("rlabel").style.visibility = 'hidden';
}
function show1()
{
document.getElementById("text1").style.visibility = 'hidden';
document.getElementById("radio1").style.visibility = 'visible';
document.getElementById("radio2").style.visibility = 'visible';
document.getElementById("rlabel").style.visibility = 'visible';
}
And HTML:
和 HTML：
<select id='listb2'>
<option onclick='hide1("$age");' value='1'>Age</option>
<option onclick='show1();' value='2'>Sex</option>
</select>
Now with Firefox and Opera it change radio buttons and textbox to visible/hidden when I choose one of the options. But with Chrome and IE they wouldn't. I also tried with "... .style.display = 'none';" nothing happened (on IE and Chrome, FF and Opera it works) even this time.
现在使用 Firefox 和 Opera，当我选择其中一个选项时，它会将单选按钮和文本框更改为可见/隐藏。但是对于 Chrome 和 IE，他们不会。我也试过“....style.display = 'none';” 即使这一次也没有发生任何事情（在 IE 和 Chrome、FF 和 Opera 上它都可以工作）。
FF 5.0; Chrome 12; IE 8; Opera 11.50
FF 5.0; 铬 12; IE 8; 歌剧 11.50
Now works with:
现在适用于：
<select onchange='hideshow(this.value);' id='listb2'>
<option value='1'>Age</option>
<option value='2'>Sex</option>
</select>
采纳答案by Town
onclickisn't valid for optionelements.
onclick对option元素无效。
Handle the onchangeevent of the selectinstead, get the selected value using the code below and then do your conditional processing.
处理 的onchange事件，select使用下面的代码获取选定的值，然后进行条件处理。
var element = document.getElementById("listb2");
var selectedValue = element.options[element.selectedIndex].value;
回答by The Pellmeister
Instead of setting 'visibility' to 'hidden', try setting 'display' to 'none'.
不要将“可见性”设置为“隐藏”，而是尝试将“显示”设置为“无”。
document.getElementById('header').style.display = 'none';
EDIT: Not quite sure whether you can set the onclickproperty on an optionelement in those browsers... Try using onchangeon your surrounding selecttag instead.
编辑：不太确定您是否可以在这些浏览器中onclick的option元素上设置属性......尝试onchange在您周围的select标签上使用。
回答by betamax
If you remove the onclick events from the select box like this:
如果您像这样从选择框中删除 onclick 事件：
<select id='listb2'>
<option value='1'>Age</option>
<option value='2'>Sex</option>
</select>
Then you can bind an onChange event using javascript:
然后你可以使用 javascript 绑定一个 onChange 事件：
var selectBox = document.getElementById("listb2");
selectBox.onchange = function(e){
if(selectBox.value == 1) {
// Do what you want for Age
hide1();
} else if(selectBox.value == 2) {
// Do what you want for Sex
show1();
}
}
回答by dknaack
I realy encourage you to use jQuery for that. jQuery guarantees that this will work in every browser. In query its very easy
我真的鼓励你为此使用 jQuery。jQuery 保证这将适用于所有浏览器。在查询中很容易
<script>
$().ready(function () {
$("#listb2").change(function () {
if ($("#listb2").val() == "1")
$("#radio1, #radio2, #rlabel").show();
else
$("#text1, #radio1, #radio2, #rlabel").hide();
});
});
</script>
<select id='listb2'>
<option value='1'>Age</option>
<option value='2'>Sex</option>
</select>
