当我将鼠标悬停在其上时，为什么<select>选项会跳转到其他选项？

So I have an interesting issue. I have a <select> menu, and it is all working as I would like with one exception. When I hover over any of the <options>, the highlighted option skip from the option I am hovering over, to the top value (and it seems to make no difference whether it is marked as 'selected,' or not). When I click it selects the correct option, not the highlighted one. It works correctly in Firefox, but not in Chrome.

Can anyone explain to me why it behaves like this, and what I might do.

Thanks!

<select name="grade" id="grade" value="" >
   <option value="4" selected >A</option>
   <option value="3.7" >A-</option>
   <option value="3.4" >B+</option>
   <option value="3" >B</option>
   <option value="2.7" >B-</option>
   <option value="2.4" >C+</option>
   <option value="2" >C</option>
   <option value="1.7" >C-</option>
   <option value="1" >D</option>
   <option value="0" >E</option>
</select>

Here is the only time I use this in my JavaScript. And as I said, it is only not functioning in google-chrome.

var in_gpa = Number($('#grade').val());

I had exactly same problem in Chrome Only!

Problem: Chrome extention:FastestChrome - Browse Faster 6.9.7

You are self closing the select and option tag, try this and see, moreover you can't set a value for <select> tag.

<select name="grade" id="grade">
   <option value="4" selected>A</option>
   <option value="3.7">A-</option>
   <option value="3.4">B+</option>
   <option value="3">B</option>
   <option value="2.7">B-</option>
   <option value="2.4">C+</option>
   <option value="2">C</option>
   <option value="1.7">C-</option>
   <option value="1">D</option>
   <option value="0">E</option>
</select>

Try disabling AdBlock when installed. This caused jumping options in dropdowns for me.