jQuery + IE6 = Could not set the selected property. Unspecified error.

Recently, I ran across an IE6 issue relating to jQuery and select options. The error message from IE6 was “Could not set the selected property. Unspecified error.“, which appears to be related to a timing issue with the DOM.

Here’s the original code, which worked for IE7 and IE8:

function loadSelectItems(selOptions, ctrl, id) {
  (ctrl).html(selOptions);
  $(ctrl).val(id);
}

1
2
3
4

function loadSelectItems(selOptions, ctrl, id) {
  (ctrl).html(selOptions);
  $(ctrl).val(id);
}

And here’s the solution, with no special browser hacks:

function loadSelectItems(selOptions, ctrl, id) {
  $(ctrl).html(selOptions);
  try {
    $(ctrl).val(id);
  }
  catch(ex) {
    //setTimeout("$('" + ctrl + "').val('" + id + "')",1);
    setTimeout(function(){$(ctrl).val(id);},1);
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function loadSelectItems(selOptions, ctrl, id) {
  $(ctrl).html(selOptions);
  try {
    $(ctrl).val(id);
  }
  catch(ex) {
    //setTimeout("$('" + ctrl + "').val('" + id + "')",1);
    setTimeout(function(){$(ctrl).val(id);},1);
  }
}

The setTimeout function provides enough delay, making the DOM available.