我正在使用http://www.datatables.net/。我为每个列创建了选择元素，这些元素包含不同的列值列表。当调用select.change（）时，我编写了代码来重新创建基于新表数据的选择（单击一个）。这在Chrome，Firefox和IE 10中运行良好。我无法弄清楚如何让它与IE 9一起工作，我准备做一些绿巨人粉碎了。
.innerHTML不起作用。 Jquery的.html（）不起作用。我尝试过.addChild（）而不是options.add（）。什么都行不通。选择将为空，它们不会被过滤，或者在过滤之后，其余的都不会引发select.change（）事件。
编辑：我还尝试在重新创建时返回parentElement.innerHTML（），以便在第一次创建表时抓取TH而不是select.innerHTML = select。
$(document).ready(function () {
/* Initialise the DataTable */
var oTable = $('#table').dataTable({
"sDom": '<"top"i>',
"bPaginate": false,
"bSort": false
})
/* Add a select menu for each TH element in the table footer */
$("thead th").each(function (i) {
this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i), i);
$('select', this).change(function () {
oTable.fnFilter($(this).val(), i);
// Get array of select controls
var a = document.getElementsByTagName('select');
// Loop through select controls
for (var j = 0; j < 7; j++) {
// If filtered array is not empty
if (filtered.length > 0) {
// If column currently being looped is not in filtered array
if ($.inArray(j, filtered) < 0) {
// If column currently being looped is not the column clicked
if ((this).textContent != a[j + 1].textContent) {
a[j + 1].innerHTML = fnCreateSelect(oTable.fnGetColumnData(j), j); // Recreate drop down list for currently looping column
}
else {
filtered.push(j); // Add column to filtered array
}
}
else
// If title is selected and currently looping column is the column selected
if ($(this).val() == "" && j == i) {
var index = $.inArray(j, filtered); // Get index of column in filtered array
filtered.splice(index, 1); // Remove column from filtered array
a[i + 1].innerHTML = fnCreateSelect(oTable.fnGetColumnData(i), i); // Recreate drop down list for column selected (Because resetting drop down)
}
}
else {
// If column currently being looped is not the column clicked
if ((this).textContent != a[j + 1].textContent) {
// THE JQUERY WAY
//var col;
//switch (a[j + 1].id) {
// case "Dest": col = "#Dest"; break;
// case "Leg": col = "#Leg"; break;
// case "Start": col = "#Start"; break;
// case "End": col = "#End"; break;
// case "Day": col = "#Day"; break;
// case "Sort": col = "#Sort"; break;
// case "Services Days": col = "#Service Days"; break;
//}
//$(col).html(fnReCreateSelect(oTable.fnGetColumnData(j), j));
// THE JAVASCRIPT WAY
a[j + 1].innerHTML = fnCreateSelect(oTable.fnGetColumnData(j), j); // Recreate drop down list for currently looping column
}
else {
filtered.push(j); // Add column to filtered array
}
}
}
//$("select").hide().show(); // Might help with IE problems
});
});
fnGetColumnData函数（获取不同的列值数组）
(function ($) {
$.fn.dataTableExt.oApi.fnGetColumnData = function (oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty) {
// check that we have a column id
if (typeof iColumn == "undefined") return new Array();
// by default we only want unique data
if (typeof bUnique == "undefined") bUnique = true;
// by default we do want to only look at filtered data
if (typeof bFiltered == "undefined") bFiltered = true;
// by default we do not want to include empty values
if (typeof bIgnoreEmpty == "undefined") bIgnoreEmpty = true;
// list of rows which we're going to loop through
var aiRows;
// use only filtered rows
if (bFiltered == true) aiRows = oSettings.aiDisplay;
// use all rows
else aiRows = oSettings.aiDisplayMaster; // all row numbers
// set up data array
var asResultData = new Array();
for (var i = 0, c = aiRows.length; i < c; i++) {
iRow = aiRows[i];
var aData = this.fnGetData(iRow);
var sValue = aData[iColumn];
//if (sValue == " ") {
// sValue = "_";
//}
// ignore empty values?
if (bIgnoreEmpty == true && sValue.length == 0) continue;
// ignore unique values?
else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;
// else push the value onto the result data array
else asResultData.push(sValue);
}
return asResultData.sort();
}
}(jQuery));
在新浏览器中运行良好的createSelect（），以及我一直用来尝试的reCreateSelect（）。
function fnCreateSelect(aData, j) {
switch (j) {
case 0: j = "Dest"; break;
case 1: j = "Leg"; break;
case 2: j = "Start"; break;
case 3: j = "End"; break;
case 4: j = "Day"; break;
case 5: j = "Sort"; break;
case 6: j = "Service Days"; break;
}
var r = '<select id="'+j+'"><option value="">' + j + '</option>', i, iLen = aData.length;
for (i = 0 ; i < iLen ; i++) {
r += '<option value="' + aData[i] + '">' + aData[i] + '</option>';
}
return r + '</select>';
}
function fnReCreateSelect(aData, j) {
switch (j) {
case 0: j = "Dest"; break;
case 1: j = "Leg"; break;
case 2: j = "Start"; break;
case 3: j = "End"; break;
case 4: j = "Day"; break;
case 5: j = "Sort"; break;
case 6: j = "Service Days"; break;
}
var s = document.getElementById(j);
var op0 = document.createElement("option");
op0.text = "";
op0.value = j;
s.options.add(op0);
var iLen = aData.length;
for (i = 0 ; i < iLen ; i++) {
var op = document.createElement("option");
op.text = aData[i]
op.value = aData[i];
s.options.add(op);
}
return s;
}
答案 0 :(得分：0)
在追加之前将其包裹在<div>。
答案 1 :(得分：0)
我将代码移到了dom.ready之外的change事件块中。然后，每次重新填充过滤器时，我都会重新注册更改事件。
function selectEvent(table, t, i) {
table.fnFilter($(t).val(), i);
// Get array of select controls
var a = document.getElementsByTagName('select');
// Loop through select controls
for (var j = 0; j < 7; j++) {
// If filtered array is not empty
if (filtered.length > 0) {
// If column currently being looped is not in filtered array
if ($.inArray(j, filtered) < 0) {
// If column currently being looped is not the column clicked
if ((t).textContent != a[j + 1].textContent) {
a[j + 1].outerHTML = a[j + 1].outerHTML.replace(a[j + 1].innerHTML + '</select>', fnReCreateSelect(table.fnGetColumnData(j), j) + '</select>'); // Recreate drop down list for currently looping column
}
else {
filtered.push(j); // Add column to filtered array
}
}
else
// If title is selected and currently looping column is the column selected
if ($(t).val() == "" && j == i) {
var index = $.inArray(j, filtered); // Get index of column in filtered array
filtered.splice(index, 1); // Remove column from filtered array
a[i + 1].inner = a[i + 1].outerHTML.replace(a[i + 1].innerHTML + '</select>', fnReCreateSelect(table.fnGetColumnData(i), i) + '</select>'); // Recreate drop down list for column selected (Because resetting drop down)
}
}
else {
// If column currently being looped is not the column clicked
if ((t).textContent != a[j + 1].textContent) {
var temp = fnReCreateSelect(table.fnGetColumnData(j), j);
var temp2 = a[j + 1].innerHTML;
//a[j + 1].innerHTML = fnReCreateSelect(oTable.fnGetColumnData(j), j);
a[j + 1].outerHTML = a[j + 1].outerHTML.replace(a[j + 1].innerHTML + '</select>', fnReCreateSelect(table.fnGetColumnData(j), j) + '</select>'); // Recreate drop down list for currently looping column
var temp3 = 5;
}
else {
filtered.push(j); // Add column to filtered array
}
}
}
$('select').change(this, function () {
selectEvent(oTable, this, this.parentElement.cellIndex);
});
}