-4

为什么这在 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;
        }

小提琴。

4

2 回答 2

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/

使用循环或更动态的方式显示正确的字段是最好的，特别是如果您使用三个以上的房间字段。

于 2013-03-29T01:17:53.353 回答
0

好吧，这里有几个问题：

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

第二个 IE 要求 onchange 是 onChange。

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

document.getElementById("Room2Type").style

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

于 2013-03-29T01:29:38.190 回答