Question

Google Chrome 9.0.597.107（官方版本75357） WebKit 534.13 V8 2.5.9.15 用户代理Mozilla / 5.0（Windows; U; Windows NT 6.1; en-US）AppleWebKit / 534.13（KHTML，与Gecko一样）Chrome / 9.0.597.107 Safari / 534.13 JQuery：1.5.0

基本上我的问题如下。我在谷歌浏览器中动态更新下拉列表（html选择）列表时遇到问题。 HTML相对简单，这是正在使用的Jquery的简化线：

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

或

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

**目前在$（文件）.ready

中

基本上他们只是在下拉选项中添加一个选项......直截了当。在Firefox和IE中完美运行，但是在谷歌浏览器中，下拉列表不会显示包含的选项，直到我与页面交互一些方式，无论是通过专注于某些内容还是滚动等...发生在多个PC上...可以看不出它的原因。

我在填充下拉菜单的函数中添加了警报，但代码已执行但Chrome不会更新...非常奇怪

有没有人遇到过这个？什么可能导致它的想法？

提前致谢， enigmab17

[编辑＃1]更多信息一直在调查它，根本无法搞清楚。即使我在页面上触发事件，它仍然无法执行任何操作，直到我实际点击或移动某些内容。

将解决方案中的所有代码都删除到自己的html页面中，并且chrome工作正常，因此必须与页面呈现有关。基本上页面是通过AJAX呈现的，有很多页面设置都是通过ajax加载到主页面

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

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

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

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

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

这会模拟你的情况吗？

Answer 2

发现问题。

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

@Arun P Johny 感谢您的帮助：）

谷歌浏览器 - JQuery附加下拉选项

2 个答案: