IE 7.0选择框重叠按钮

时间:2011-05-06 12:20:27

标签: jquery html internet-explorer

我的谷歌技能让我失望。 我在IE 7.0中遇到以下问题(适用于FF 4.0和Chrome)

我最初有一个空的选择框。当我使用Jquery填充它时,选择框与按钮重叠。

我假设有一个css hack,但我没有得到正确的搜索结果。

我有以下代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
    </script>
</head>
<body>
    <div>
        <select id="missionList" name="missionList">
            <option></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
        <select name="peopleList" id="slPeopleFoundList" size="5" multiple="multiple">
        </select>
        <input type="submit" id="Remove" value="Remove" disabled="disabled" />
    </div>
</body>
</html>
<script type="text/javascript">

    $(function () {

        $("#missionList").change(function () {
            SetupUpMissionList();
        });

        function SetupUpMissionList() {
            var select = $("#slPeopleFoundList");

            appendOption("he asdfasdfasdf asdf asdf asdfllo", "hello", select);
        }

        function appendOption(text, value, select) {
            $(select).
                  append($("<option></option>").
                  attr("value", value).
                  text(text));
        }

    });

</script>

1 个答案:

答案 0 :(得分:1)

愚蠢的,愚蠢的IE。我尝试在为select元素添加选项的代码周围添加.hide()/。show(),它的工作方式如下:

select.hide();
appendOption("he asdfasdfasdf asdf asdf asdfllo", "hello", select);
select.show();