Question

最初我认为这是一个CSS问题，但我建立了一个小样本来重现问题。如果使用IE8，则不显示值：Value1,2和3：

<!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" >
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            alert("Thanks for visiting!");
            var gridCommandBox = $('#GridCommands')[0];

            if (gridCommandBox.options.length == 0) {

                gridCommandBox.options.add(new Option("<Select Command>", ""));
                var clipGroup = document.createElement("optgroup");
                clipGroup.label = "Copy To Clipboard...";
                clipGroup.appendChild(new Option("Value1", "Value1"));
                clipGroup.appendChild(new Option("Value2", "Value2"));
                clipGroup.appendChild(new Option("Value3", "Value3"));
                gridCommandBox.appendChild(clipGroup);
            }
        });
    </script>
</head>
<body>

<table>
<tr><td><select id="GridCommands"></select></td></tr>
</table>

</body>
</html>

有什么想法吗？谢谢最大

Answer 1

Option对象是与HTML中的标记关联的HTML DOM对象。您正在直接实例化Option对象并尝试将此JavaScript对象附加到另一个DOM元素。

虽然这可能适用于某些浏览器，但您应该使用document.createElement('option')来创建选项。如果您使用新的Option方法，则可能还需要在之后添加history.go(0)以强制浏览器刷新选择选项。

在下拉列表框中通过appendChild方法添加的项目不会显示在IE8下

1 个答案: