Google Chrome - JQuery Append option to Dropdown
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']"));
or
$("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 ch开发者_StackOverflow社区eck 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!?
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?
Found the problem.
Basically the dropdown/options were part of a larger form which is being populated using an XSLT transform. There was 2 input radio buttons being placed onto page above that through an XSLT stylesheet template, so the template was generating the inputs and apppparently google chrome doesn't like this for some strange reason. Once I converted it to a somewhat messy looking select tag instead of the template it worked fine. Strangest issue ever! :D
@Arun P Johny Thanks for the assistance :)
加载中,请稍侯......
精彩评论