document.getElementById().style.display = 'none';仅适用于 Firefox答案

【问题标题】：document.getElementById().style.display = 'none'; only works in Firefoxdocument.getElementById().style.display = 'none';仅适用于 Firefox
【发布时间】：2015-11-22 23:00:00
【问题描述】：

为什么这只适用于 Firefox？ IE 和 Chrome 似乎忽略了 style.display = 'none' 有什么建议吗？

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>


    <script language="JavaScript">
        function validateForm() {

            document.getElementById('option2').style.display = 'none';

       }
    </script>

</head>
<body>
    <select id="employeeID" onchange="validateForm();">
        <option value="0" id="option0">Select an Employee</option>
        <option value="1" id="option1">Employee 1</option>
        <option value="2" id="option2">Employee 2</option>
        <option value="3" id="option3">Employee 3</option>
    </select>
</body>
</html>

【问题讨论】：

在 Chrome 中工作 jsfiddle.net/wdDz4
@YuriyGalanter 似乎确实如此，但我的 JSFiddle 将其保存在 onchange 函数中，并且似乎没有相同的结果。 jsfiddle.net/uWQzs
@katana314，如果你把它放在一个函数中，你需要调用这个函数:)
它适用于 Chrome 和 FF，但不适用于 IE11
@Katana314 HTML 找不到函数。但如果它放在 HEAD 中它可以工作：jsfiddle.net/uWQzs/1

标签： javascript css internet-explorer google-chrome firefox

【解决方案1】：

您应该使用.addEventListener 方法将change 事件绑定到您的选择元素->

DEMO

Javascript

function validateForm() {

    alert(); //checking if this actually works

document.getElementById('option2').style.display = 'none';

}


select_ = document.getElementById('employeeID');

select_.addEventListener('change',validateForm,false);

或

select_.onchange = validateForm;

铬

Safari

【讨论】：

【解决方案2】：

变化：

document.getElementById('option2').style.display = 'none';

到

document.getElementById('option2').style.visibility="hidden";

【讨论】：

确保它确实在触发。在 validateForm 函数中，只需添加一个 alert('hello');或 alert(document.getElementById('option2').style.display);
我收回我的评论。我忘记了我还有一些其他调试代码。这有效，但它将条目显示为空白行，而不是完全删除它

【解决方案3】：

Chrome 等浏览器现在更喜欢使用 jQuery 而不是 JavaScript，所以改变一下：

document.getElementById('option2').style.display = 'none';

像这样隐藏：

$('#option2').hide();

并再次显示它：

$('#option2').show();

【讨论】：

嗯，当然，jQuery“只是”一个用 JavaScript 编写的库；恕我直言，答案是题外话，因为依赖于强大的跨浏览器 JavaScript 解决方案，OP 可能非常好，事先了解 jQuery。
同意。无关。 “只需使用 jQuery”并不能真正解决这个问题。