CODEWITHSUNDEEP
javascriptjqueryeventshtml-selectmouseup
clecai
clecai

Reputation: 85

MouseUp() event on html select not working

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

Upvotes: 3

Views: 3046

Answers (2)

Rahul Singh
Rahul Singh

Reputation: 21825

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.

Upvotes: 0

robbmj
robbmj

Reputation: 16526

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

Upvotes: 3

Related Questions