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似乎有你脚本的来源： - ）

除了IE9之外，用于填充下拉列表的Javascript工作

1 个答案: