why the jquery .change event doesn't work as I expect

Question

Here is my problem:

I've got a select tag with two options - "Hello" and "World"

html

<select>
<option> Hello </option>
<option> World </option>
</select>

In IE when you choose an option and and it becomes the selected option the blue highlighting remains until you click somewhere else outside the select tag. (In firefox it's not that way)

SO I wrote a script removes focus from the element when an option has been selected.

script

$('select').change(function() {
        $(this).blur();

But still one little problem stays: if i choose Hello and then gain Hello option - the focus will remain and the blue highlighting. But if I choose hello and then world option -everything works..
I read that For select menus, the change event occurs when an option is selected!!!But why the option has to be different from the previous selected to trigger the change event. I hope you understand my English is not so good

here is js example -please test it in IE TEST JSFIDDLE EXAMPLE

Answer 1

If you select the same value, the option hasn't really changed has it?

The change event is only triggered if the option changes.

Answer 2

Try this:

$(document).ready(function() {
  $('select').mouseout(function(){$(this).blur();})
});

It is kind of a hack, will work, but not recommended as if a user is trying to fill it with keyboard then it might be a bit troublesome