1. Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

FireFox: Selected Index Delayed

Discussion in 'Programming & Webmastering' started by ste2425, Aug 20, 2013.

  1. ste2425


    May 27, 2008
    3,577 (1.05/day)
    Thanks Received:
    Huddersfield, uk
    Hi all.

    This should be very simple but it isn't.

    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


    Anyone experienced this issue before and have a possible workaround?
  2. Ross211


    Jan 9, 2010
    481 (0.17/day)
    Thanks Received:
    This should work in every browser using jQuery -

    HTML -
    <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>
    JS -
    $(function(){ // dom ready
        var selected = $('#CTRL_category option:selected');
        alert('selected id -> ' + selected.attr('id') + '\nselected value -> ' + selected.attr('value'));
            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.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guest)