为什么JavaScript代码不能在IE中使用？

-4

为什么不在IE10中工作？它适用于Chrome，Firefox，Opera和Safari。为什么JavaScript代码不能在IE中使用？

HTML：

<form action="#"> 
    <label for="NoOfRooms">Select number of rooms required</label> 
    <select id="NoOfRooms" onchange="showHide()"> 
     <option value="1" selected="selected">1 room</option> 
     <option value="2">2 rooms</option> 
     <option value="3">3 rooms</option> 
    </select> 
    <br /> 
    <label id="Room1TypeLabel" for="Room1Type" class="inline">Room 1:</label> 
    <select id="Room1Type"> 
     <option value="1" selected="selected">Single</option> 
     <option value="2">Double</option> 
     <option value="3">Triple</option> 
    </select> 
    <br /> 
    <label id="Room2TypeLabel" for="Room2Type" class="hidden">Room 2:</label> 
    <select id="Room2Type" class="hidden"> 
     <option value="1">Single</option> 
     <option value="2" selected="selected">Double</option> 
     <option value="3">Triple</option> 
    </select> 
    <br /> 
    <label id="Room3TypeLabel" for="Room1Type" class="hidden">Room 3:</label> 
    <select id="Room3Type" class="hidden"> 
     <option value="1">Single</option> 
     <option value="2">Double</option> 
     <option value="3" selected="selected">Triple</option> 
    </select> 
</form>

的JavaScript：

function showHide() { 
    "use strict"; 
    var NoOfRooms = document.getElementById("NoOfRooms"); 
    var NoOfRoomsValue = NoOfRooms.options[NoOfRooms.selectedIndex].value; 
    if (NoOfRoomsValue == 2) { 
     Room2Type.style.display = "inline"; 
     Room3Type.style.display = "none"; 
     Room2TypeLabel.style.display = "inline"; 
     Room3TypeLabel.style.display = "none"; 
    } else if (NoOfRoomsValue == 3) { 
     Room2Type.style.display = "inline"; 
     Room3Type.style.display = "inline"; 
     Room2TypeLabel.style.display = "inline"; 
     Room3TypeLabel.style.display = "inline"; 
    } else if (NoOfRoomsValue == 1) { 
     Room2Type.style.display = "none"; 
     Room3Type.style.display = "none"; 
     Room2TypeLabel.style.display = "none"; 
     Room3TypeLabel.style.display = "none"; 
    } else alert("Error. Please try again."); 
}

CSS：

.hidden { 
      display: none; 
     }

Fiddle。

来源

2013-03-29 Mike

是的，它也不适用于Chrome。 – Tim

它应该做什么？ – jahroy

你不能隐藏'option'元素。您只能添加/删除它们。 – Eru

我不知道你是否包含完整的脚本，但它不适用于Firefox，对我来说无论如何。

我建议在div中包装字段，所以你不需要切换每个标签/输入。您可以通过直接分配事件来将onchange =属性保留在html之外，使用库在跨浏览器compat中很有帮助。

我把它扔在一些jquery的（这可能是矫枉过正，如果你只是做JS的这个单位，但我怀疑你），它工作得很好：

它需要一些清理工作，但我把它一起：

$(function(){ 

    $('#NoOfRooms').change(function(){ 
     if($(this).val() == 1){ 
      $('#room1').show(); 
      $('#room2, #room3').hide(); 
     } 
     else if($(this).val() == 2){ 
      $('#room1,#room2').show(); 
      $('#room3').hide(); 
     } 
     else if($(this).val() == 3){ 
      $('div').show(); 
     } 
    }).trigger('change'); 
});

http://jsfiddle.net/uQVMF/4/

使用循环或显示正确的领域更加动态的方式是最好的，特别是如果你使用三个以上的房领域。

来源

2013-03-29 01:17:53 helion3

这似乎工作 – Markasoftware

工作正常。谢谢。任何想法我写的代码不工作在ie下？ – Mike

你写的代码在Firefox中不适合我，onchange事件甚至没有解雇，但这可能只是一个小问题。 – helion3

好吧，所以在这里工作的几个问题：

第一小提琴是行不通的，因为的jsfiddle自动换在了jQuery的onLoad功能代码。在JSFiddle的左侧边栏上将“onLoad”切换为“No Wrap”修复了这个问题，并使代码在Chrome和Firefox中运行。

第二个IE需要onchange变为onChange。

最后你需要定义Room2Type，Room3Type，Room2TypeLabel等变量，你选择做了同样的方式：

document.getElementById("Room2Type").style

但是，所有上述真的只是让你明白为什么你的代码WASN”不工作。你真的应该沿着@博茨科网前进的方向使用一些东西。

来源

2013-03-29 01:29:38 middleinitial

为什么JavaScript代码不能在IE中使用？

回答

相关问题