用于填充下拉列表的Javascript适用于IE9以外的所有应用程序

我正在使用以下javascript代码：

function dynamicSelect(id1, id2) {
  if (document.getElementById && document.getElementsByTagName) {
    var sel1 = document.getElementById(id1);
    var sel2 = document.getElementById(id2);
    var clone = sel2.cloneNode(true);
    var clonedOptions = clone.getElementsByTagName("option");
    refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
    sel1.onchange = function() {
      refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
    };
  }
}
function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
  while (sel2.options.length) {
    sel2.remove(0);
  }
  var pattern1 = /( |^)(select)( |$)/;
  var pattern2 = new RegExp("( |^)(" +
  sel1.options[sel1.selectedIndex].value + ")( |$)");
  for (var i = 0; i < clonedOptions.length; i++) {
    if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
      sel2.appendChild(clonedOptions[i].cloneNode(true));
    }
  }
}
window.onload = function() {
  dynamicSelect("worktype", "function");
  dynamicSelect("worktype2", "function2");
}

这个HTML代码：

<select class="dropdown" name="type" id="worktype2">
  <option class="select" value="select">Select Type...</option>
  <option value="clerk">White collar</option>
  <option value="worker">Blue collar</option>
</select><br /><br />
<label for="function" class="search-label">SELECT A FUNCTION</label><br />
<select name="function" class="dropdown" id="function2">
<option class="select" value="select">Select Function...</option>
<?php
  $getFunctionsSQL = "SELECT * FROM categories;";
  $getFunctionsSQLresult = mysql_query($getFunctionsSQL) or die(mysql_error()); 
  while ($record = mysql_fetch_array($getFunctionsSQLresult)) {
    echo "<option class='" . $record['type'] . "' value='". $record['category']."'>". $record['category'] ."</option>";
  }
?>
</select><br /><br />

它的作用是根据在另一个下拉列表中选择的内容填充一个下拉菜单。它适用于Firefox、Chrome、IE7、IE8。。。但不是IE9…

还没有找到原因。