Question

我在这里有一个示例html代码，javascript在浏览Google Chrome和Mozilla Firefox时效果很好，但从Internet Explorer 9查看时，它现在搞乱了。

我的HTML代码是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="dummy.js"></script>
        <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    </head>
    <body>
        <div id="dummy" style="display:none;"><option value="dummy">dummy</option></div>
        <table>
            <tr>
                <td>
                    <tbody id="MultCompanyIdPane">  </tbody>
                </td>
            </tr>
        </table>
    <script>modifyMultCompIdFunc();</script>
    </body>
</html>

我的示例javascript是：

function modifyMultCompIdFunc() {
    $("#MultCompanyIdPane").show();

        var html =
                '<tr>' +
                    '<td align="left">Company:</td>' +
                    '<td align="right">' + 
                        '<select id="var" class="UserMgmtInputText">' +
                            $("div#dummy").html() +
                        '</select>' +
                    '</td>' +
                '</tr>';
        $("#MultCompanyIdPane").append(html);
}

我已经尝试重置我的IE配置，但它没有解决问题。关于如何解决这个问题的任何想法？或者我做错了吗？

在显示方面搞砸了，当在谷歌浏览器/ mozilla中查看时，下拉列表框正常工作（选择框上有一个值），但是当使用IE9查看时，下拉列表中没有任何值下拉列表框。

感谢。

Answer 1

您的示例中存在多个问题。

MultCompanyIdPane id使用2次。
IE不允许<option>标记用于<select>标记。这就是为什么$("div#dummy").html()只返回文字dummy而不是<option value="dummy">dummy</option>。

Working example

Answer 2

您有两个具有相同ID的<tbody>元素（MultCompanyIdPane）。此外，您的<option>代码应为<option>dummy</option>或<option value="dummy">dummy</option>。

jQuery在IE中不起作用，但适用于Chrome和Firefox

2 个答案: