Scriptaculous Builder Not Setting Selected Value In FireFox

Question

I am trying to build a select options list and apply a default value to it. It seems to work in Chrome, but not in Firefox. My code is:

var sel2 = Builder.node('select',{
  name: 'type_' + tId,
  id: 'type_' + tId
});
$A(templateTypes).each(function(t,idx){
  var o = Builder.node('option',{value:dataID},DataName);
  sel2.appendChild(o);
  if (curID == dataID) {
    $(sel2).selectedIndex = idx;
  }
});

I tried things like:

if (curID == dataID) {
  var o = Builder.node('option',{value:dataID,selected:'selected'},DataName);
}

That even though set selected="selected" in Firebug, it didn't apply to what was shown. Hard refreshing doesn't appear to solve it either.

Does someone have a solution that will work across all browsers?

Thanks.

Answer 1

It seems adding a new node to the select box confuses Firefox. How about this instead:

var sel2 = Builder.node('select',{
  name: 'type_' + tId,
  id: 'type_' + tId
});

// store the desired index in this
var selectedIndex = 0;

$A(templateTypes).each(function(t,idx){
  var o = Builder.node('option',{value:dataID},DataName);
  sel2.appendChild(o);
  if (curID == dataID) {
    selectedIndex = idx;
  }
});

// now set the selected index _after_ we've added all the options:
sel2.selectedIndex = selectedIndex;

Seems to work in my brief test.