我正在使用以下 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...
还没弄清楚为什么。