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

    ste2425

    Joined:
    May 27, 2008
    Messages:
    3,503 (1.34/day)
    Thanks Received:
    417
    Location:
    Huddersfield, uk
    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?
     
  2. Ross211

    Ross211

    Joined:
    Jan 9, 2010
    Messages:
    474 (0.23/day)
    Thanks Received:
    115
    Location:
    Kansas
    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.
     

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

Share This Page