FireFox: Selected Index Delayed

Hi all.

This should be very simple but it isn't.

Code:

var categories = document.getElementById("CTRL_category");
	var indexs = $('#CTRL_category').prop("selectedIndex");
	var catIndex = categories.selectedIndex;
	debug("original: " + catIndex);
	debug("jquery: " + indexs);

I also tried jquery but it behaves the exact same way.

I have a dropdown list with id of "CTRL_category. It has a five items. When scrolling through with arrow keys it should then return values from 0-4 right? When using the mouse and clicking each element the value returned is correct. If i select an element at index zero debug outputs zero to the console. select index 1 debug outputs 1.

Now the fun bit. Using the arrow keys to select index 1 coming from zero and debug outputs 0. Move back up to zero and it then outputs 1.

Basically the returned index is always one behind. This works fine in all other browsers so im assuming its a firefox issue.

I also found this on bugzilla

bug

Anyone experienced this issue before and have a possible workaround?

 

This should work in every browser using jQuery -

HTML -

Code:

<select id="CTRL_category">
    <option value='option-1' id="opt1">Option 1</option>
    <option value='option-2' id="opt2">Option 2</option>
    <option value='option-3' id="opt3">Option 3</option>
</select>

JS -

Code:

$(function(){ // dom ready
    var selected = $('#CTRL_category option:selected');
    alert('selected id -> ' + selected.attr('id') + '\nselected value -> ' + selected.attr('value'));
    $('#CTRL_category').change(function(){
        var selected = $('#CTRL_category option:selected');
        alert('selected id -> ' + selected.attr('id') + '\nselected value -> ' + selected.attr('value'));
    });
});

Click here for a jsFiddle demo of this code above.

Notice that on DOM ready I am alerting data on the currently selected element. The same thing occurs if you change to a different select element.