在所有浏览器中使用javascript显示或隐藏元素 [英] Show or hide an element using javascript in all browsers
本文介绍了在所有浏览器中使用javascript显示或隐藏元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是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>
这是JavaScript代码.
Here is the javascript code..
function toggleDisplay(id, displayvalue)
{
if ( displayvalue == 1 ) {
document.getElementById(id).style.display = 'block';
} else if ( displayvalue == 0 ) {
document.getElementById(id).style.display = 'none';
}
}
上面的代码在firefox和ie(兼容性视图已关闭)中工作正常,但在chrome和ie(兼容性已打开)中工作正常.
The above code is working fine in firefox and ie (compatibility view turned off) but in chrome and ie(compatibility turned on).
我在做什么错?有没有合适的方法可以在所有浏览器中使用?
What am i doing wrong? Is there a proper way of doing this that works in all browsers?
推荐答案
使用onchange代替onclick
html
use onchange instead of 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
function toggleDisplay(id, displayvalue)
{
if ( displayvalue == "others" ) {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
}
这篇关于在所有浏览器中使用javascript显示或隐藏元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文