====== Don't mix Dom0 and Dom1 methods ======

I was trying the [[http://www.tuitman.org/cgi-bin/blog.pl?command=showpage&page=pages/permanent.html|spreadsheet algorithm]] of my friend [[http://www.tuitman.org/cgi-bin/blog.pl?cat=programming|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.

<code javascript>
/**
 * 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"]);
</code>

{{tag>javascript}}