在所有浏览器中使用 javascript 显示或隐藏元素答案

【问题标题】：Show or hide an element using javascript in all browsers在所有浏览器中使用 javascript 显示或隐藏元素
【发布时间】：2013-01-08 14:02:59
【问题描述】：

这里是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代码..

    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（兼容性已打开）中运行良好。

我做错了什么？有没有一种适用于所有浏览器的正确方法？

【问题讨论】：

jQuery 将抽象浏览器差异...
依赖<option> 元素的“点击”事件是非常不稳定的。您应该为 <select> 设置一个“更改”处理程序。
还指定 displayvalue = 0 inside displayvalue == 1 .
同样重复这样的代码真的很糟糕。计算机非常擅长这类事情。
onclick 选项标签不适用于 IE 和 chrome stackoverflow.com/questions/9972280/…

标签： javascript html css

【解决方案1】：

使用 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

function toggleDisplay(id, displayvalue)
{    
    if ( displayvalue == "others" ) {
         document.getElementById(id).style.display = 'block';
    } else {
         document.getElementById(id).style.display = 'none';
    }
}

【讨论】：