javascript - Dropdown value changes on hover in Firefox -

in firefox if click on dropdown , hovering on list, , while hovering if take value of dropdown shows hovered value without clicking it.

suppose 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 selected value joe. if run following code,

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

it printing value hover in list. creates problems in situations calling ajax request , in success, if hover through dropdown, taking wrong value without clicking it. (the html generated through jsf)

you should not value of dropdown itself, value of option hover:

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

or if need value of dropdown - bind dropdown itself, not options.

apparently <option> elements not fire hover events in ie well, don't think approach chosen correct @ all. if need specific behavior this, i'd recommend skin dropdown's behaviour css+js , emulate divs or links, through may correct hover behavior.