Question

So I’ve written some code to sort all my site’s select menus, and it works perfectly in every browser we support… except Firefox.

http://jsfiddle.net/vkjAC/6/

My code takes in the options for a select element, sorts them, and returns them. Somewhere in there, the selectedIndex on the select element changes to the last item.

I check what values are selected/defaultSelected:

for(k=0; k<options.length; k++)
{
    if(options[k].defaultSelected == true)
    {
        sel = k;
        break;
    }
}
if(sel === null)
{
    for(k=0; k<options.length; k++)
    {
        if(options[k].selected == true)
        {
            sel = k;
            break;
        }
    }
}
if(sel === null)
    { options[0].selected = true; }
else
    { options[sel].selected = true; }

But I can’t set the selectedIndex from this function because I’m not passing in the entire select object, just the option list.

I tried looking up similar problems, but every other thread I saw said it was a caching problem, or that I needed to add autocomplete=”off”, but those didn’t work. I assume it has something to do with my code, but I haven’t modified the selectedIndex property anywhere.

Any suggestions? I’m losing my mind (and running out of time!)

Answer 1

I’ve had this before. It has something to do with the fact that the options are removed then added again. You have to re-select the value after sorting. For example:

var ops = $('#mass').find('option');
$('#mass').prepend(sortDropDown(ops)).val($("#mass > option[selected]").val());