为什么这段 JavaScript 代码在 IE 中不起作用？ [关闭]答案

【问题标题】：Why doesn't this JavaScript code work in IE? [closed]为什么这段 JavaScript 代码在 IE 中不起作用？ [关闭]
【发布时间】：2013-03-29 09:29:38
【问题描述】：

为什么这在 IE10 中不起作用？它适用于 Chrome、Firefox、Opera 和 Safari。

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.

【问题讨论】：

是的，它在 Chrome 中也不起作用。
它应该做什么？
您不能隐藏option 元素。您只能添加/删除它们。
你的意思是它不起作用？它应该做什么？
抱歉，Fiddle 上的代码已更新。它假设根据房间的选择显示/隐藏表单元素。 @Tim 它可以在 Chrome 中使用..

标签： javascript html css

【解决方案1】：

我不知道你是否包含了完整的脚本，但它在 Firefox 上不起作用，对我来说。

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

我把它扔进了一些 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/

最好使用循环或更动态的方式来显示正确的字段，尤其是当您使用三个以上的房间字段时。

【讨论】：

工作正常。谢谢你。知道我写的代码在 ie 下不起作用吗？
您编写的代码在 Firefox 中对我不起作用，onchange 事件甚至没有触发，但这可能只是一个小问题。

【解决方案2】：

好的，这里有几个问题：

首先，小提琴不起作用，因为 JSFiddle 会自动将您的代码包装在 jquery onLoad 函数中。将 JSFiddle 左侧边栏上的“onLoad”切换为“No Wrap”可修复此问题，并使代码在 Chrome 和 Firefox 中运行。

第二个 IE 要求 onchange 为 onChange。

最后，您需要定义 Room2Type、Room3Type、Room2TypeLabel 等变量，方法与选择时相同：

document.getElementById("Room2Type").style

但以上所有内容实际上只是为了让您了解为什么您的代码无法正常工作。你真的应该按照@BotskoNet 所写的内容使用一些东西。

【讨论】：