Question

我有一个在Firefox和Safari上运行良好的JavaScript代码段，但拒绝在IE上运行：

var drop= function(id)
{
   if(document.getElementById("select1").value == "Ficha de pediatria"){
    top.location.href = "print.jsp?id="+id+"&type=2";
   }
   else if(document.getElementById("select1").value == "Ficha normal"){
        top.location.href = "print.jsp?id="+id+"&type=1";
   }
}

<select id="select1" name="select1" onChange="drop(id);return false;">
<option>Imprimir:</option>
<option>Ficha de pediatria</option>
<option>Ficha normal</option>
</select>

我对此有所了解，因为它有更多的JSP代码，但它仍然保持不变。任何人都知道为什么它不在IE上运行？

Answer 1

[编辑]抱歉。我在第一篇文章中介绍了一个错误，没有仔细查看你是如何构建你的网址的。我不应该删除id参数。我已经更新了代码，现在应该可以使用了。

请改为尝试：

function drop(ctl,id)
{
   var value = ctl.options[ctl.selectedIndex].value;

   if(value == "Ficha de pediatria"){
       window.top.location.href = "print.jsp?id="+id+"&type=2";
   }
   else if (value == "Ficha normal"){
       window.top.location.href = "print.jsp?id="+id+"&type=1";
   }
}

<select id="select1" name="select1" onChange="drop(this,id);return false;">
<option>Imprimir:</option>
<option>Ficha de pediatria</option>
<option>Ficha normal</option>
</select>

[编辑]一点解释......

我认为问题在于它是如何访问DOM的。我认为IE在select上没有value属性。我认为你必须通过选择的选项获得它。此外，我不确定全局命名空间中是否存在顶级属性，但您应该能够通过window.top获取该位置以设置位置。最后，我通过指定this作为参数略微改进，你可以跳过元素查找并直接从作为参数传递的控件引用它。

Answer 2

IE不喜欢你抓住选择

的价值的方式

document.getElementById("select1").value

这就是说“给我带有id select1 的select元素中所选选项的value属性中的文本。你的选项没有任何值。当Firefox和Safari遭遇时这种歧义，他们返回所选选项的文本。当Internet Explorer遇到这种歧义时，它会返回一个空白字符串。如果你做了像

这样的事情你的javascript将会工作

<select id="select1" name="select1" onChange="drop(this,id);return false;">
    <option value="Imprimir:">Imprimir:</option>
    <option value="Ficha de pediatria">Ficha de pediatria</option>
    <option value="Ficha normal">Ficha normal</option>
</select>

如果无法做到这一点，您将需要获取所选选项的文本。

var theSelect = document.getElementById("select1");
var theValue  = theSelect.options[theSelect.selectedIndex].text

最后，虽然不是您的直接问题，但硬编码 select1 并不是获取选择列表的最佳方式。请考虑使用此关键字

function foo(theSelect){
    alert(theSelect.options);
}

...

<select id="whatever" onchange="foo(this);">
...
</select>

这是更通用的，您将能够在具有任何ID的选择上使用您的功能。

Answer 3

并不是IE“没有.value”的＆lt; select＆gt;元素，就是你没有为＆lt; option＆gt;指定任何值元素即可。 Firefox，Safari和co。可能会保护你免受这个错误的影响。尽管如此，您的元素应该构造为：

<select ...>
<option value="Imprimir">Imprimir:</option>
<option value="Ficha de pediatria">Ficha de pediatria</option>
<option value="Ficha normal">Ficha normal</option>
</select>

...您将看到＆lt; select＆gt;的.value属性的更多标准x浏览器行为。

Answer 4

我看到两个可能的原因。

1 - 声明函数的方式。我从来没有见过它，虽然我猜它有用。

也许尝试以下操作，看看它是否仍然有效：

function drop(id)
{
    // same code
}

2 - IE中的返回false并不总是正常运行（相信我，这取决于计算机）所以不要返回false，请尝试：

onChange="drop(id);event.returnValue=false;return false;"

如果可能的话，创建一个像这样的方法：

function CrossBrowserFalse()
{
     if(IE) // use whatever you want to detect IE
     {
         event.returnValue = false;
     }

     return false;
}

然后在你的方法中你可以使用：

onChange="drop(id);return CrossBrowserFalse();"

...是的，IE有时候很常见（经常）

如果这两个失败，至少要确保你的drop函数是通过在那里放置一些警报或断点来调用的，如果你的IDE支持javascript的话。

Javascript没有在IE上运行

4 个答案: