MouseUp() event on html select not working

Question

So I have a list of countries, displayed as a dropdown with a select element,

here's my HTML :

<select id="myList">
 <option>United States</option>
 <option>France</option>
 <option>Great Britain</option>
 <option>China</option>
 <option>Russia</option>
</select>

<span id="selectedCountry"> </span>

What I would like is to be able to set the value of my #selectedCountry as the option that the user actually selects.

I tried to set up a .mouseUp() jquery event, like this :

$("#myList").mouseup(function() {

   var val = $(this).val();
   $("#selectedCountry").text(val);

 });

What is weird is that this code triggers a .mousedown() / .click() event but not what I intend it to do...

Any thought on how to get the value of the select element using mouseup() ?

ps : I know a focusout() event would produce a similar result (as explained here) but I wanted to understand if there's something specific regarding select elements and mouseup() events.

thanks

Answer 1

Personally I would use the .change event

The .mouseup() event has slightly different behaviour between Chrome and Firefox. Also if the value is changed programmatically the .mouseup() event wont catch the change to the value, however the .change() event will.

$("#myList").change(function() {

   var val = $(this).val();
   $("#selectedCountry").text(val);

});

FIDDLE