jquery chrome select change/click not working; works in IE/FF

Question

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</option>
</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.

Answer 1

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

Answer 2

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

}));