在 IE7 中出现 Javascript 错误，但在 Firefox 中没有答案

【问题标题】：Getting a Javascript error in IE7 but not in Firefox在 IE7 中出现 Javascript 错误，但在 Firefox 中没有
【发布时间】：2009-07-15 20:05:20
【问题描述】：

好的，所以我正在编写一些 Javascript 以获得一个简单的效果：当一个下拉列表被选中时，会出现一系列选项，具体取决于选择了哪个选项。这在 Firefox 中效果很好，但是当我在 Internet Explorere 上对其进行测试时，事情就不那么好了。它失败了，什么是如此有用，以及未知的运行时错误。因此，这里是设置的 HTML（简化版）。很简单的东西：

<form>
   <ul>
      <li>
         <label class="description" for="request_type">Type of request </label>
         <div>
            <select onchange="vrf.VRDescChange(this.value)" name="request_type"> 
               <option value="" selected="selected"></option>
               <option value="Business Trip">Business Trip</option>    
            </select>
         </div> 
      </li>
      <span id="otheroptions">
         <li>
            <input type="text" id="Name"></input>
         </li> 
      </span>
   </ul>
</form>

注意：“vrf”已正确实例化。当页面加载时，“otheroptions”范围被隐藏，直到从“request_type”下拉列表中选择了某些内容。所以，这里是 Javascript 的代码（再次简化）：

VRFunctions.prototype.VRDescChange = function(value) {    
   if (value === "Business Trip") {
      document.getElementById("otheroptions").style.display = "block";
   }
}

如您所见，我正在为 Javascript 使用 Prototypes。这可能与它有关吗？任何启发都是最有帮助的。

【问题讨论】：

提供了关于错误的什么消息？
消息是“未知运行时错误”，代码为 0。此外，在 IE7 中也是如此。
附带说明，您的 LI 元素应该在某种列表中，OL 或 UL。
它们在实际站点上...我只是忽略了把它放在这里。糟糕！

标签： javascript html internet-explorer

【解决方案1】：

您是否尝试过 Firebug Lite 在 IE 中对其进行调试？ (http://getfirebug.com/lite.html)

【讨论】：

【解决方案2】：

当您在 select 元素的 onChange 处理程序中调用 VRDescChange 时，为什么在您继续在函数中引用 select 元素时传递 this.form：

if(form.request_type.value === "Business Trip") {

当然，在onChange 处理程序中将this 作为参数传递给VRDescChange 而不是this.form 会更有意义

另外，要获取您要使用的选定值：

var rt; //Set this to reference the request_type select element
var selectedvalue = rt.options[rt.selectedIndex].value;

【讨论】：

【解决方案3】：

您的问题可能与在 span 元素上设置“块”的显示样式有关。我似乎记得 IE 对在哪些元素上设置哪些样式非常挑剔。

尝试将显示样式更改为“内联”，看看它是否仍然报错：

document.getElementById("otheroptions").style.display = "inline";

【讨论】：

运气不好。我觉得这个错误是 JavaScript 特有的，至少现在是这样。该错误是一个 javascript 错误，因此 IE 拒绝运行任何代码。

【解决方案4】：

vrf.VRDescChange(this.form)

我认为上述行在 Firefox 和 IE 中的行为不同。

将您的 SELECT 更改为

 <select onchange="vrf.VRDescChange(this)" name="request_type">

并使用这个 JS：

VRFunctions.prototype.VRDescChange = function(el) {    
   if(el.options[el.selectedIndex].value === "Business Trip") {
      document.getElementById("otheroptions").style.display = "block";
   }
}

我建议您查看如何以不显眼的方式附加事件处理程序。

编辑：

固定代码。

编辑：

这里的'vrf'值是多少？

试试这个代码：(Working Demo)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
#otheroptions { display: none; }
</style>

<script>
function handleChange(el)
{
   var value = el.options[el.selectedIndex].value;
   document.getElementById("otheroptions").style.display = value === '' ? 'none' : 'block';
}

</script>
</head>
<body>
  <p>Hello from JS Bin</p>
  <p id="hello"></p>
<form>
   <ul>
      <li>
         <label class="description" for="request_type">Type of request </label>
         <div>
            <select onchange="handleChange(this)" name="request_type"> 
               <option value="" selected="selected"></option>
               <option value="Business Trip">Business Trip</option>    
            </select>
         </div> 
      </li>
      <span id="otheroptions">
         <li>
            <input type="text" id="Name"></input>
         </li> 
      </span>
   </ul>
</form>  
</body>
</html>

【讨论】：

如果是这样，那为什么它在 Firefox 中运行得那么好呢？ this.form 显然返回了一些东西。
我的原始 DOM 知识越来越生疏了，'this' 确实指的是当前元素。我认为 'this.form' 在 IE 和 Firefox 中的行为不同。在任何情况下，您都可以传递选择对象本身并检查它的值，而不是传递表单。
另外，这并没有解决问题。
我刚刚修复了代码以找到选择元素的“值”。 'SELECT' 元素没有像 'input' 元素那样的 value 属性。
随着新的变化，它仍然没有解决问题。然而，这种方式看起来确实比传递整个表单更干净（而且不那么麻烦）。谢谢。

【解决方案5】：

您的示例在 IE7 中运行良好。我的猜测是还有其他问题。我会看看你的 VRFunctions 对象。

<script>
   (function(){
      VRFunctions = function(){};
      VRFunctions.prototype.VRDescChange = function(value) {    
         if (value === "Business Trip") {
            document.getElementById("otheroptions").style.display = "block";
         }
      };
    vrf = new VRFunctions();

   }());
</script>

<form>
   <ul>
      <li>
         <label class="description" for="request_type">Type of request </label>
         <div>
            <select onchange="vrf.VRDescChange(this.value)" name="request_type"> 
               <option value="" selected="selected"></option>
               <option value="Business Trip">Business Trip</option>    
            </select>
         </div> 
      </li>
      <span id="otheroptions" style="display:none">
         <li>
            <input type="text" id="Name"></input>
         </li> 
      </span>
   </ul>
</form>

【讨论】：