在所有浏览器中使用 javascript 显示或隐藏元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14208836/
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
Show or hide an element using javascript in all browsers
提问by Dipesh
Here is the html code..
这是html代码..
<select id="dept" name="dept" style="float: left;">
<option value="eee" onclick="toggleDisplay('dept_input_div', 0)">EEE</option>
<option value="ece" onclick="toggleDisplay('dept_input_div', 0)">ECE</option>
<option value="eie" onclick="toggleDisplay('dept_input_div', 0)">EIE</option>
<option value="cse" onclick="toggleDisplay('dept_input_div', 0)">CSE</option>
<option value="it" onclick="toggleDisplay('dept_input_div', 0)">IT</option>
<option value="mechanical" onclick="toggleDisplay('dept_input_div', 0)">Mechanical</option>
<option value="civil" onclick="toggleDisplay('dept_input_div', 0)">Civil</option>
<option value="mechatronics" onclick="toggleDisplay('dept_input_div', 0)">Mechatronics</option>
<option value="biotech" onclick="toggleDisplay('dept_input_div', 0)">Bio-tech</option>
<option value="automobile" onclick="toggleDisplay('dept_input_div', 0)">Automobile</option>
<option value="chemical" onclick="toggleDisplay('dept_input_div', 0)">Chemical</option>
<option value="aeronautical" onclick="toggleDisplay('dept_input_div', 0)">Aeronautical</option>
<option value="architecture" onclick="toggleDisplay('dept_input_div', 0)">Architecture</option>
<option value="others" onclick="javascript:toggleDisplay('dept_input_div', 1);">Others..</option>
</select>
<div id="dept_input_div" style="display: none">
<input class="inputbox" name="dept-input" type="text" id="dept-inputbox" />
</div>
Here is the javascript code..
这是javascript代码..
function toggleDisplay(id, displayvalue)
{
if ( displayvalue == 1 ) {
document.getElementById(id).style.display = 'block';
} else if ( displayvalue == 0 ) {
document.getElementById(id).style.display = 'none';
}
}
The above code is working fine in firefox and ie (compatibility view turned off) but in chrome and ie(compatibility turned on).
上面的代码在 Firefox 和 ie（兼容性视图关闭）中运行良好，但在 chrome 和 ie（兼容性打开）中运行良好。
What am i doing wrong? Is there a proper way of doing this that works in all browsers?
我究竟做错了什么？是否有适用于所有浏览器的正确方法？
回答by hsgu
use onchange instead of onclick
html
使用 onchange 而不是 onclick
html
<select id="dept" name="dept" style="float: left;" onchange="toggleDisplay('dept_input_div' , this.value)">
<option value="eee" >EEE</option>
<option value="ece" >ECE</option>
<option value="eie" >EIE</option>
<option value="cse" >CSE</option>
<option value="it" >IT</option>
<option value="mechanical" >Mechanical</option>
<option value="civil" >Civil</option>
<option value="mechatronics" >Mechatronics</option>
<option value="biotech" >Bio-tech</option>
<option value="automobile" >Automobile</option>
<option value="chemical" >Chemical</option>
<option value="aeronautical" >Aeronautical</option>
<option value="architecture" >Architecture</option>
<option value="others">Others..</option>
</select>
<div id="dept_input_div" style="display: none">
<input class="inputbox" name="dept-input" type="text" id="dept-inputbox" />
</div>
javascript
javascript
function toggleDisplay(id, displayvalue)
{
if ( displayvalue == "others" ) {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
}
