在IE7中遇到Javascript錯誤，但在Firefox中卻沒有

Question

好的，所以我正在編寫一些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使用原型。 這可能與它有關嗎？ 任何啟蒙都是最有幫助的。

Answer 1

您是否嘗試過Firebug Lite在IE中對其進行調試？ （ http://getfirebug.com/lite.html ）

Answer 2

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'在這里的價值是什么？

嘗試以下代碼：（工作演示）

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

Answer 3

當您在選擇元素的onChange處理程序中調用VRDescChange時，為什么要在繼續引用函數中的select元素時傳遞this.form ：

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

當然，將this作為參數傳遞給VRDescChange而不是onChange處理程序中的this.form會更有意義。

另外，要獲取要使用的選定值：

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

Answer 4

您的問題可能與在span元素上設置顯示樣式“ block”有關。 我似乎還記得IE對於在哪些元素上設置哪種樣式非常挑剔。

嘗試將顯示樣式更改為“內聯”，然后查看是否仍然抱怨：

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

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

在IE7中遇到Javascript錯誤，但在Firefox中卻沒有

問題描述

5 個解決方案

解決方案1
1 2009-07-15 20:11:57

解決方案2
0 2009-07-15 20:13:21

解決方案3
0 2009-07-15 20:13:50

解決方案4
0 2009-07-15 20:27:44

解決方案5
0 2009-07-15 20:47:00

在IE7中遇到Javascript錯誤，但在Firefox中卻沒有

問題描述

5 個解決方案

解決方案1 1 2009-07-15 20:11:57

解決方案2 0 2009-07-15 20:13:21

解決方案3 0 2009-07-15 20:13:50

解決方案4 0 2009-07-15 20:27:44

解決方案5 0 2009-07-15 20:47:00

解決方案1
1 2009-07-15 20:11:57

解決方案2
0 2009-07-15 20:13:21

解決方案3
0 2009-07-15 20:13:50

解決方案4
0 2009-07-15 20:27:44

解決方案5
0 2009-07-15 20:47:00