0

ページ上のアクションに基づいて動的に変化するドロップダウン リストを使用する Web ページがあります。これは、firefox と chrome ではうまく機能しますが、Internet Explorer では失敗します。

同様の問題を持つエントリが複数見つかりましたが、それらはすべて html 構文の問題に言及しています。ページの完全な構文を確認しましたが、ページの一部が JavaScript によって生成されたクライアント側であるため、面倒です。ただし、html 構文の問題は見つかりません。

この特定の部分に焦点を当てるために、小さなスクリプトを使用して小さなテスト ページを作成することにしました。このページの動作はまったく同じです。Firefox では、ドロップダウン リストの非表示/表示は正常に機能しますが、IE9 では失敗します。イベントが実際にスクリプトに渡されることを確認するために、アラートを含めました。ドロップダウン エントリで失敗するのは、表示と非表示だけです。ページの他の要素では、非表示機能と表示機能に問題はありません。

IEの開発者ツール(F12開発者ツール)で確認すると、表示属性がきちんと設定されていることがよくわかります。ただし、リスト項目は表示されたままです。

IE9 でドロップダウン リストの表示と非表示を適切に機能させるにはどうすればよいですか?

ページコード:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <h1>Test</h1>

    <select id="list">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>

    <input id="hide" type="button" value="Hide">
    <input id="show" type="button" value="Show">

    <p id="text">Test to see if this can be hidden.</p>
</body>
</html>

script.js コード:

function setHideHandler(state)
{
    if (state)
    {
        $("#hide").on("click", function(event) {
            hideList();
        });
    }
    else
    {
        $("#hide").off();
    }
}

function setShowHandler(state)
{
    if (state)
    {
        $("#show").on("click", function(event) {
            showList();
        });
    }
    else
    {
        $("#show").off();
    }
}

function hideList()
{
    $("#list option").each(function() {
        var name = $(this).text();
        alert("Hiding: " + name);
        $(this).hide();
    });
    $("#text").hide();
}

function showList()
{
    alert("Show");
    $("#list option").each(function() {
        var name = $(this).text();
        alert("Showing: " + name);
        $(this).show();
    });
    $("#text").show();
}

$(document).ready(function() {
    setHideHandler(true);
    setShowHandler(true);
});
4

0 に答える 0