-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のこの1ビットだけを実行している場合はやり過ぎかもしれませんが、そうではないと思います）、うまく機能します：

いくつかのクリーンアップが必要ですが、まとめました：

$(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/

特に 3 つ以上のルーム フィールドを使用する場合は、適切なフィールドを表示するループまたはより動的な方法を使用するのが最適です。

于 2013-03-29T01:17:53.353 に答える
0

さて、ここでいくつかの問題が発生しています。

まず、JSFiddle がコードを jquery onLoad 関数で自動的にラップするため、フィドルが機能しませんでした。JSFiddle の左側のサイドバーで "onLoad" を "No Wrap" に切り替えると、この問題が修正され、Chrome と Firefox でコードが機能するようになります。

2 番目の IE では、onchange が onChange である必要があります。

最後に、select で行ったのと同じ方法で、Room2Type、Room3Type、Room2TypeLabel などの変数を定義する必要があります。

document.getElementById("Room2Type").style

しかし、上記はすべて、コードが機能しなかった理由を理解するためのものです。@BotskoNetが今後書いたものに沿って何かを使用する必要があります。

于 2013-03-29T01:29:38.190 に答える