为什么这个 javascript 代码在 Internet Explorer 中不起作用？答案

【问题标题】：Why doesn't this javascript code work in Internet Explorer?为什么这个 javascript 代码在 Internet Explorer 中不起作用？
【发布时间】：2013-09-13 19:19:33
【问题描述】：

有人可以检查为什么我的 javascript 代码在 Internet Explorer 9 中无法运行，但在 Firefox 中运行正常吗？？？此外，代码在 Google Chrome 中也不起作用。

<html>
<head>
   <title>test</title>
   <script type="text/javascript">
      function showF4(){
      document.getElementById('showF4').style.display = "block";
   }
   </script>
</head>
<body>
   <form method="post" action="" enctype="multipart/form-data" method="post">
      <p><select class="selField" id="list_sel" name="list_type" >
         <option id="F4DOL" onmouseover="showForm7()" onmouseout="hideForm7()"            onclick="showF4()"  value="F4 Document List"> F4 Document List </option>

      </select></p>
   </form>

   <div id="showF4" style="display: none">
      <p><font color="red">*</font>Feature:
      <input   id="f4_input"  name="f4_input" type="text" value="" /> </p>
   </div>
</body>
</html>

【问题讨论】：

js函数showForm7() & hideForm7()在哪里？
w3.org/TR/DOM-Level-2-HTML/html.html#ID-70901257 - 这些事件不是为<option /> 元素定义的
忘记 showForm7() & hideForm7() , 不重要, 看看 showF4() , 我想显示块 show f4 , 当我点击下拉菜单时

标签： javascript internet-explorer cross-browser internet-explorer-9

【解决方案1】：

<option id="F4DOL" onmouseover="showForm7()" onmouseout="hideForm7()" onclick="showF4()"  value="F4 Document List"> F4 Document List </option>

options 没有像onClick 这样的事件，它是选择框。将那些从 option 移出到 select 并更改为适当的方法，例如 onChange 等。

【讨论】：

我试过
结果如何
它在 IE 中工作，但这会给我带来麻烦，因为，我需要完全更改 javascript 代码，是否有任何其他解决方案，每次调用不同的 javascript 函数时，当我点击
你必须做你该做的。您肯定可以在网络上找到一些 hack，但默认情况下选项标签没有这些事件。
此外，您还有许多使用select 元素来简化它的方法。您可以使用更多事件，例如 onMouseOver、onChange、onClick 等

【解决方案2】：

于是我发现了以下内容：

http://www.webmasterworld.com/forum91/4959.htm

其中一个人给出了这个答案

hi, 
your method of setting the style of elements: 

element.style.property="something";

will not work in ie. How to set styles with javascript depends not only on the browser, but in some cases also on other conditions, as if the style is inline or comes from css and on other things (for this see eg. quirksmode.org).
Therefore you might prefer to add styles for a specific class in your stylesheet, let's say 

.noshow {visibility: hidden;}

and then use js to switch between visible and not by saying 

element.className="noshow";

and 

element.className="";

Hope this helps.

看看，或许能解决你的问题

【讨论】：