Search code examples
javascriptinternet-explorer-8appendchild

Items added via appendChild method on a dropdown listbox are not displayed under IE8

Initially I thought it was a CSS issue but I built a small sample to repro the issue. The values: Value1, 2 and 3 are not displayed if you use IE8:

<!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>

Any ideas? Thanks Max

Solution

  • An Option object is the HTML DOM object that is associated with an tag in HTML. You are instantiating an Option object directly and trying to append this JavaScript object to another DOM element.

    While this may work for some browsers, you should be using document.createElement('option') to create the options. If you use the new Option approach, you may also have to add history.go(0) afterwards to force the browser to refresh the select options.