0

我有一个使用下拉列表的网页，它会根据页面上的操作动态更改。这在 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