Google Chrome - JQuery 将选项附加到下拉列表答案

【问题标题】：Google Chrome - JQuery Append option to DropdownGoogle Chrome - JQuery 将选项附加到下拉列表
【发布时间】：2011-07-07 23:23:15
【问题描述】：

谷歌浏览器 9.0.597.107（官方版本 75357）网络套件 534.13 V8 2.5.9.15 用户代理 Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.107 Safari/534.13 jQuery：1.5.0

基本上我的问题如下。我在 Google Chrome 中动态更新下拉列表（html 选择）时遇到问题。 HTML 相对简单，这是正在使用的 Jquery 的精简版：

($("&lt;option />").val("test1").text("test2")).appendTo($("select[id*='SearchInput_Origin']"));

或

$("select[id*='SearchInput_Origin']").append($("<option />").val("test1").text("test2"));

** 这目前在 $(document).ready 中

基本上，他们只是在下拉选项中添加一个选项……就这么简单。在 Firefox 和 IE 中完美运行，但在 Google Chrome 中，下拉列表不会显示包含的选项，直到我以某种方式与页面交互，无论是通过关注某些东西还是滚动等...发生在多台电脑上...可以找不到原因。

我在填充下拉列表的函数中设置了警报，代码被执行，但 Chrome 没有更新……很奇怪

以前有人遇到过这种情况吗？有什么想法可能导致它吗？

提前致谢，谜题17

[编辑 #1] 更多信息一直在研究它，完全无法弄清楚。即使我在页面上触发事件，在我实际单击或移动某些东西之前它仍然什么都不做。

将解决方案中的所有代码单独剥离成一个 html 页面，chrome 工作正常，因此必须与页面渲染有关。基本上页面是通过 AJAX 呈现的，有许多页面设置都通过 ajax 加载到主页中

[编辑 #2] 非常非常奇怪。基本上默认情况下，选择列表显示为：

<select id="Select1" name="select1">
    <option value="-1">Default...</option>
</select>

它呈现如上。删除所有选项并用其他选项填充它的代码在 doc.load 中。如果我在 chrome 中检查元素检查器，它会显示选项已更新，但 chrome 不会将这些更改呈现到屏幕上。

更奇怪的是下拉菜单下方有一个标准超链接，如果我将鼠标悬停在它上面，更新的选项将由 chrome 呈现！？

【问题讨论】：

标签： jquery ajax google-chrome dhtml

【解决方案1】：

我已经使用以下代码检查了它，它对我来说很好

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
    </head>
    <body>
        <select></select>
    </body>
    <script>
        $(document).ready(function(){
            $("<option />").val("test1").text("test2").appendTo($("select"));
        });
    </script>
</html>

您能否使用此代码重新创建问题？

你可以找到一个 jsFiddle here。

更新：

试试这个示例

main.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/smoothness/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.js"></script>
    </head>
    <body>
        <span class="button">Click to laod</span>
        <div class="container"></div>
    </body>
    <script>
        $(document).ready(function(){
            $("span.button").button().click(function(){
                $("div.container").load("ajax.html")
            });
        });
    </script>
</html>

ajax.html

<select></select>
<script>
    $(document).ready(function(){
        $("<option />").val("test1").text("test2").appendTo($("select"));
    });
</script>

这是否模拟了您的情况？

【讨论】：

是的，它工作正常，我自己也做了同样的事情，一定与我自己加载页面的方式有关。
目前还没有在网络上真正存在。基本上所有页面都是由 .NET 动态创建的。主页可以将其称为“Main.aspx”，然后根据通过书签 id 传入的标志加载所有单独的子页面，例如Main.aspx#Info 将通过 AJAX 将 Info 页面加载到主页中。所以我只能假设这会导致 Chrome 出现一些问题......在 IE/Firefox 等中运行良好。
是的，但我已经将它包含在页面上并且它可以工作，所以只需浏览我的其余 js 看看是否有其他原因会导致它，无法想象它会不过。
根据上述编辑。很奇怪的问题，一定是有什么干扰。

【解决方案2】：

找到问题了。

基本上，下拉菜单/选项是使用 XSLT 转换填充的较大表单的一部分。通过 XSLT 样式表模板在页面上方放置了 2 个输入单选按钮，因此该模板正在生成输入，并且由于某些奇怪的原因，谷歌浏览器显然不喜欢这个。一旦我将它转换为看起来有点凌乱的选择标签而不是模板，它就可以正常工作。有史以来最奇怪的问题！ :D

@Arun P 约翰尼感谢您的帮助:)

【讨论】：