HTML Select with disabled Option returns wrong selectedIndex in FireFox

Question

I have a Select with a disabled Option wich is the default selected one:

<select name="select" size="1">
   <option>0</option>
   <option selected disabled>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
</select>

If I get the selected, it returns 1. Everything OK.

But if I open the popup and hover with the cursor over another Option (for Example '4')
and Cancel it via ESC or by clicking anywhere else.

The Select input shows the old value 1 but returns on get selected 4.

Example with jsfiddle

It doesn't happen with Chrome only FireFox (4/5)

Answer 1

It appears that the display is not changed when you exit your select this way however firefox is looking for a different selectedValue because it finds the currently selected option as disabled, which in firefox' eyes should be impossible.

The onChange event was not triggered until the onBlur event (which is when the selectedValue would get changed, but this is not what the display is changed to). If we were to reset our value in the onChange event this event might get called again. So by utilising the onBlur event we can provide the following workaround:

onBlur="javascript:document.getElementsByName('select')[0].selectedIndex = document.getElementsByName('select')[0].selectedIndex;"

http://jsfiddle.net/aRMpt/22/

I hope I'm making sense here.