Google Chrome - JQuery 将选项附加到下拉菜单

发布于 2024-10-20 09:07:02 字数 1365 浏览 3 评论 0原文

谷歌浏览器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，如 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 没有更新...很奇怪

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

提前致谢， enigmab17

[编辑 #1] 更多信息一直在研究，完全搞不明白。即使我在页面上触发事件，它仍然不会执行任何操作，直到我实际单击或移动某些内容。

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

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

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

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

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

原文

Google Chrome 9.0.597.107 (Official Build 75357)
WebKit 534.13
V8 2.5.9.15
User Agent 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

Basically my issue is as follows. I am having an issue dynamically updating a dropdown (html select) list in Google Chrome. The HTML is relatively straight forward and this is a stripped down line of the Jquery being used:

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

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

** this is currently in the $(document).ready

Basically they are just adding an option to a dropdown option...straight forward enough.
Works perfectly in Firefox and IE, however in Google Chrome the dropdown list does not show the option as being included until I interact with the page some how, whether by focusing on something or scrolling etc...happens on multiple pc's...can't see a reason for it.

I've put an alert in the functions that are populating the dropdowns and the code gets executed but Chrome doesn't update...very odd

Has anyone come across this before?
Any ideas what could be causing it?

Thanks in advance,
enigmab17

[edit #1] Further Information
Have been investigating it, can't figure out it out at all. Even if I fire events on the page it still does nothing until I physically click or move something.

Stripped all the code out of the solution into a a html page on it's own and chrome works fine so must have something to do with the page rendering. Basically the page is being rendered through AJAX, there are a number of pages setup which are all being loaded into the main page via ajax

[edit #2]
Very very strange.
Basically by default the select list appears as:

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

And it renders as above. The code to remove all options and populate it with others is in the doc.load. If i check the element inspector in chrome, it shows the options having been updated but chrome doesn't render these changes to the screen.

What's even stranger is there is a standard hyperlink below the dropdown and If i hover over it the updated options are rendered by chrome!?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

看海 2024-10-27 09:07:02

我已经使用以下代码对此进行了检查，它对我来说工作正常

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

更新：

尝试这个示例

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>

这是否模拟了您的情况？

I've checked this using the following code and it works fine for me

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

Are you able to recreate the issue using this code?

You can find a jsFiddle here.

UPDATED:

Try this sample

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>

Does this simulate your case?

回复收藏 0 原文

拥有 2024-10-27 09:07:02

发现问题了。

基本上，下拉列表/选项是使用 XSLT 转换填充的更大表单的一部分。有 2 个输入单选按钮通过 XSLT 样式表模板放置在上面的页面上，因此该模板正在生成输入，显然 google chrome 出于某种奇怪的原因不喜欢这样。一旦我将其转换为看起来有些混乱的选择标签而不是模板，它就可以正常工作。有史以来最奇怪的问题！ :D

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

回复收藏 0 原文

~没有更多了~