Question

I’ve written the following routine to sort the option elements within a select:

function SortSelect(select)
{
    var tmpAry = new Array();
    for (var i in select.options)
        tmpAry[i] = select.options[i];
    tmpAry.sort(function(opta, optb)
    {
        if (opta.id > optb.id) return  1;
        if (opta.id < optb.id) return -1;
        return 0;
    });
    while (select.options.length > 0)
        select.options[0] = null;
    for (var i in tmpAry)
        select.appendChild(tmpAry[i]);
}

It works just fine with Firefox as part of a Greasemonkey script. However, in Chrome, both with and without TamperMonkey, I get this:

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8
SortSelect:125

As is typical for Javascript debuggers, the error line number is totally wrong, so it’s difficult to pin down exactly why this is breaking and where. I’m open to suggestions as to why the code is bugging out or ways to effectively debug it (I’m new to Chrome). Thanks.

Answer 1

You should iterate over the options collection using an index, not a for..in loop. The following:

for (var i in select.options) {
  tmpAry[i] = select.options[i];

should be:

var options = select.options;
for (var i=0, iLen=options.length; i<iLen; i++) {
  tmpAry[i] = options[i];
}

You are likely getting properties from the options collection that aren’t option elements, such as length.

You also should not assign “null” to an option. If you want to remove all the options, just set the length of options to zero:

var options.length = 0;

Finally, you should iterate over tmpAray using an index since for..in will not return the options in the same order in every browser and may return non-numeric enumerable properties if there are any, use an index. Also, you can just assign the option back to the select’s options collection, there is no need for appendChild:

select.options.length = 0;
for (var i=0, iLen=tmpAry.length; i<iLen; i++) {
    select.options[i] = tmpAry[i];
}

If you are not removing any options, you should be able to just assign them in the new order, but some browsers can’t handle that so removing them first is best.

Edit

Note that while the options property of a select element is readonly, the properties of an options collection are not. You can assign values (which should be references to option elements) directly to them.