CODEWITHSUNDEEP
javascriptjqueryhtml
Tomin
Tomin

Reputation: 2018

Dropdown value changes on hover in Firefox

In Firefox if I click on a dropdown and hovering on the list, and while hovering if I take the value of the dropdown it shows the hovered value even without clicking it.

Suppose I have:

<select size="1" class="form-control input-sm input-element" name="fiveMod" id="fiveMod">   
<option value="[6FAM]">6-FAM (fluorescein)</option>
<option value="[HEX]">HEX</option>
<option selected="selected" value="[JOE]">JOE </option>
<option value="[TET]">TET </option>

Here the selected value is JOE. If I run the following code,

$('#fiveMod > option').hover(function(){
   console.log($('#fiveMod').val());
});

It is printing the value which I hover in the list. This creates problems in some situations where I am calling an ajax request and in success, if I hover through dropdown, it is taking the wrong value even without clicking it. (The HTML is generated through JSF)

Upvotes: 0

Views: 288

Answers (1)

Farside
Farside

Reputation: 10333

You should get not the value of the dropdown itself, but the value of option you hover:

$('#fiveMod > option').hover(function(){
   console.log($(this).prop("value"));
});

Or if you need to get the value of the dropdown itself - then bind even to the dropdown itself, not to the options.

Apparently <option> elements do not fire hover events in IE as well, so I don't think this approach chosen is correct at all. If you need specific behavior for this, I'd recommend to skin the dropdown's behaviour with CSS+JS and emulate it with divs or links, through which you may do the correct hover behavior.

Upvotes: 1

Related Questions