jquery chrome select change/click not working; works in IE/FF
I have a simple select list that when I click on one of the options displays the selected option in a message. Everything works as expected in IE and FF but not in Chrome. Here is my HTML:
<select id="selectlist" class="select_list" size="10" title="Choose an item to load">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
<option value="5">Item 5</o开发者_运维百科ption>
</select>
And here is my jQuery:
$(function(){
$("#selectlist").click(function(event){
alert("Click event on Select has occurred!");
$("option:selected", $(this)).each(function(){
...more code here...
});
});
});
In IE and FF the alert displays whenever an option is clicked but not in Chrome. I have used .change rather than .click with exactly the same results.
Any help would be truly appreciated.
UPDATE!
After further research and testing I believe the problem is not with the select tag but is related to the jquery dialog. I have created a test case at http://jsfiddle.net/chuckl/6Gh78/3/ that reproduces the problem. Click on the Load button to produce the dialog window. In FF you can click on an item in the list and it will be selected, the p tag updated, and an alert box will appear. In Chrome all you get is the alert box.
It looks like you're not the only one! Chrome-html select doesnt recognize value if keyed in
^^ Had a similar issue.
Your code renders fine for me. You might want to consider submitting it to Google's http://code.google.com/p/chromium/issues/list (Chromium Issue Tracker) or their:
Chrome Help Forums http://www.google.com/support/forum/p/Chrome
I guess you could try updating your Chrome or Reinstalling? :S
I found that the following worked for me - instead on using on click, use on change e.g.:
jQuery('#elemen select').on('change', (function() {
//your code here
}));
The code you have works fine for me in version 14.0.814.0. However since what you're talking about is a bug and isn't really a question, you should instead submit it to the Chromium issue tracker.
Works fine for me too (version 12.0.742.122). Possibles issues:
Maybe you have another error in your script, that keeps this one from being executed; check the console (
Ctrl + Shift + J)Where is your script placed in the page? Maybe the DOM is not yet initialized when your script executes. In that case, try wrapping it in
$(document).ready(function(){ ... })instead of$(function(){ ... })
Try to use the Prop method. I tested it on Safari, Opera, Firefox, and Chrome, and it worked fine.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test - Option selected - jQuery</title>
</head>
<body>
<form>
<select>
<option value="11">aa</option>
<option value="22">bb</option>
<option value="33">cc</option>
<option value="44">dd</option>
</select>
</form>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$('select option:last').prop('selected','selected');
});
</script>
</body>
</html>
You can find more information here:
http://jquery.com/upgrade-guide/1.9/#attr-versus-prop-
加载中,请稍侯......
精彩评论