代码之家 › 专栏 › 技术社区 › Peter

在ie7中但在firefox中获取javascript错误

internet-explorer html javascript

Peter · 技术社区 · 17 年前

好吧,我写了一些javascript来实现一个简单的效果:当一个下拉菜单被选中时,会出现一系列的选项,这取决于选择了哪一个。这在Firefox中很有用,但当我在InternetExplorere上测试时,情况就不那么好了。它失败了,有什么好帮助的,还有未知的运行时错误。所以,这里是设置的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”已正确实例化。加载页面时,“其他选项”范围将隐藏,直到从“请求类型”下拉列表中选择某个内容为止。所以,这里是javascript的代码(同样,简化了):

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

正如您所看到的,我正在为JavaScript使用原型。这和它有关系吗?任何一个荣誉都是最有帮助的。

5 回复 | 直到 17 年前

Nelson 17 年前

你试过firebug lite在ie中调试它吗?( http://getfirebug.com/lite.html )

Alex Rozanski 17 年前

当你打电话 VRDescChange 在select元素的 onChange 汉德勒,你为什么要通过 this.form 当你继续引用 select 函数中的元素:

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

当然,通过 this 作为论据 小精灵 而不是 这个表格 在 换上 处理程序

另外,要获取要使用的选定值:

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

17 of 26 17 年前

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

尝试将显示样式更改为“内联”并查看是否仍有问题:

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

SolutionYogi Eric Lippert 17 年前

vrf.VRDescChange(this.form)

我认为在firefox和ie中,上述的行为是不同的。

将选择更改为

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

Knickerless-Noggins 17 年前

你的例子在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>