• Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.
  • The forums have been upgraded with support for dark mode. By default it will follow the setting on your system/browser. You may override it by scrolling to the end of the page and clicking the gears icon.

FireFox: Selected Index Delayed

Joined
May 27, 2008
Messages
3,629 (0.58/day)
System Name Ultra 64
Processor NEC VR4300 (MIPS R4300i)
Motherboard proprietary design
Cooling Fanless aircooled
Memory 4.5MB 250 MHz RDRAM
Video Card(s) 62.5 MHz Reality Coprocessor
Storage 32 - 512 Mbit ROM Cartridge
Display(s) 720x576
Case Clear Blue Funtastic
Audio Device(s) 16-bit CD quality
Power Supply proprietary design
Mouse N64 mouse for use with N64DD
Keyboard N64 keyboard for use with N64DD
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.
 
Back
Top