Don't mix Dom0 and Dom1 methods

I was trying the spreadsheet algorithm of my friend Jan Tuitman, but it didn’t seem to work in my browser (FireFox). After some studying, I realized he was mixing Dom1 (option=document.createElement(”OPTION”)) and Dom0 methods (select.add(option)) to populate a HTML select-control.

This probably works in Internet Explorer, but not in Firefox. So you should either use document.createElement and select.appendChild or you should stick to Dom0-methods. I prefer Dom0 for this, because the code is simpler (and select.innerHTML on a select has issues). When using Dom0, you should avoid the add-method, since this one has issues.

/**
 * Clears the options select, and repopulates the list.
 * @select HTMLSelect A reference to a select-element: document.getElementsByTagName("SELECT")[0];
 * @list   Array      An even-sized array of text/value pairs: ["Text","value"]
 */
function FillSelect(select,list) {
  var options=select.options;
  //clear all options
  options.length=0; 
  //populate
  for(var i=0; i<list.length; i+=2) {
    options[options.length]=new Option(list[i],list[i+1]);
  }  
}
FillSelect(document.getElementsByTagName("SELECT")[0],["Apple","APPL","Dell","DELL","Hewlett Packard","HP"]);

javascript