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

As far as I'm concerned, it seems to work fine for me here: http://jsfiddle.net/hf64pbfw/ — Winestone, Oct 11 '14 at 17:48
@Winestone : maybe it's browser-related but your fiddle produces a mousedown() event for me (using the latest version of Chrome for OsX) — clecai, Oct 11 '14 at 18:02
@clecai I'm using Chrome on windows so it should be the same, what do you mean by mousedown event btw? So what do you do to tell that it is mousedown not mouseup? — Winestone, Oct 11 '14 at 18:27
@Winestone, What I mean by mousedown is that the country name is printed to the dom when I press the mouse button and not when I release it. You can tell the difference if you click various countries : Click 1 : FRANCE -> Nothing is printed to the DOM Click 2 : CHINA -> "France" is printed to the DOM — clecai, Oct 11 '14 at 19:16
@clecai wierd, for me, when I click down on the thing (which defaults to US), the dropdown menu opens, then when I release United States shows up in the span and the dropdown menu remains open. If I click down on a country, nothing changes, and when I release, the dropdown menu closes and the new country shows up in the span. — Winestone, Oct 12 '14 at 04:50

robbmj · Accepted Answer · 2014-10-11T17:59:32.857

3

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

edited Oct 11 '14 at 17:59

answered Oct 11 '14 at 17:50

robbmj

16,085
8
38
63

@dfsq + robbmj : Cool ! .change() is the right event indeed, didn't think of using it before. Thanks guys – clecai Oct 11 '14 at 18:01

score 0 · Answer 2 · answered Oct 11 '14 at 18:02

0

MouseUp event handles the Javascript "Mouseup" event. What you are trying to achieve should be done by a Change event instead, because that will actually trigger when you change dropdowns value in browser.

answered Oct 11 '14 at 18:02

Rahul Singh

21,585
6
41
56

MouseUp() event on html select not working

2 Answers2