Question

我有一个使用下拉列表的网页，该列表根据页面上的操作动态更改。这在firefox和chrome中效果很好，但在Internet Explorer中失败了。

我发现有多个类似问题的条目，它们都引用了html语法中的问题。我检查了页面的完整语法，这很麻烦，因为页面部分是由javascript生成的客户端。但是，我找不到任何html语法问题。

我决定用一个小脚本制作一个小测试页面，专注于这一特定部分。此页面具有完全相同的行为。在firefox中，下拉列表的隐藏/显示正常工作，而在IE9中失败。我包含警报以确认事件实际上是传递给脚本的，就是这种情况。只是显示和隐藏在下拉条目中失败。在页面中的其他元素上，我没有隐藏和显示函数的问题。

当我检查IE的开发人员工具（F12开发人员工具）时，我可以清楚地看到display属性设置正确。但是列表项仍然可见。

如何让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);
});

下拉列表中的IE9 jquery show / hide失败

0 个答案: