Получение ошибки Javascript в IE7, но не в 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

Ваш пример отлично работает в 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>

Answer 3

Ваша проблема может быть связана с установкой стиля отображения «блока» на элементе span. Кажется, я помню, что IE очень привередлив в отношении того, какие стили установлены для каких элементов.

Попробуйте изменить стиль отображения на «встроенный» и посмотрите, будет ли он по-прежнему жаловаться:

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

Answer 4

Когда вы вызываете VRDescChange в обработчике onChange выбранного элемента, почему вы передаете this.form, когда затем продолжаете ссылаться на элемент select в функции:

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

Конечно, было бы более разумно передать this в качестве аргумента VRDescChange вместо this.form в обработчике onChange

Кроме того, чтобы получить выбранное значение, которое вы хотите использовать:

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

Answer 5

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";
   }
}

Я бы посоветовал вам посмотреть, как можно незаметно прикреплять обработчики событий.

EDIT:

Фиксированный код.

EDIT:

Какое значение здесь '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>