用于填充下拉列表的 Javascript 适用于除 IE9 之外的所有内容

Question

我正在使用以下 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...

还没有找到原因。

Answer 1

变化

var clonedOptions = clone.getElementsByTagName("option");

到

var clonedOptions = clone.options;

似乎可以为 IE9 修复它，并且不会破坏 IE7、IE8 或 Chrome。

感谢http://www.codingforums.com/showthread.php?t=229946，它似乎有你的脚本的来源:-)