【发布时间】：2021-12-11 07:40:50
【问题描述】：
我正在使用以下代码动态填充三个下拉菜单“project_select”、“hr_select”和“id_select”。
$(document).ready(function() {
var table = $('#example1').DataTable({
data: dataSet1,
orderCellsTop: true,
columns: [{
data: "Project_Name"
},
{
data: "ID"
},
{
data: "HR"
}
],
initComplete: function() {
this.api().columns([0, 1, 2]).every(function() {
var column = this;
var colIdx = column.index();
var node;
var select;
if (colIdx === 0) {
node = $('#project_select');
select = $('<select id="project_s" style="width: 20%"><option value=""></option></select>');
}
if (colIdx === 2) {
node = $('#hr_select');
select = $('<select id="hr_s" style="width: 20%" multiple><option value=""></option></select>');
}
if (colIdx === 1) {
node = $('#id_select');
select = $('<select id="id_s" style="width: 20%" multiple><option value=""></option></select>');
}
select.appendTo($(node).empty())
.on('change', function() {
var val = $(this).val();
if (colIdx === 0) {
val = $.fn.dataTable.util.escapeRegex(val);
column.search(val).draw();
rebuildPositionSelect();
rebuildIDSelect();
}
if (colIdx === 2) {
const vals = $('option:selected', this).map(function(index, element) {
return $.fn.dataTable.util.escapeRegex($(element).val());
}).toArray().join('|');
column.search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false).draw();
rebuildIDSelect();
} else {
const vals = $('option:selected', this).map(function(index, element) {
return $.fn.dataTable.util.escapeRegex($(element).val());
}).toArray().join('|');
column.search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false).draw();
}
});
column.data().unique().sort().each(function(val) {
select.append('<option value="' + val + '">' + val + '</option>')
});
});
function rebuildPositionSelect() {
var select = $('#hr_select select').empty().append('<option value=""></option>');
var column = table.column(2, {
search: 'applied'
});
column.search('').draw();
column.data().unique().sort().each(function(val) {
select.append('<option value="' + val + '">' + val + '</option>');
});
}
function rebuildIDSelect() {
var select = $('#id_select select').empty().append('<option value=""></option>');
var column = table.column(1, {
search: 'applied'
});
column.search('').draw();
column.data().unique().sort().each(function(val) {
select.append('<option value="' + val + '">' + val + '</option>');
});
}
$('#project_s').select2({
placeholder: "Select Project:",
allowClear: true,
width: 'resolve'
})
$('#hr_s').select2({
placeholder: "Select Hr(s):",
closeOnSelect: false,
allowClear: true,
tags: true,
width: 'resolve'
});
$('#id_s').select2({
placeholder: "Select ID:",
closeOnSelect: false,
allowClear: true,
tags: true,
width: 'resolve'
});
}
});
});
目前，“hr_select”和“id_select”菜单根据用户在“project_select”中的单个选择填充值。我正在努力根据用户在“hr_select”中的多项选择来进一步填充“id_select”菜单。
错误示例：用户选择项目 A 和小时 0、10、20。“id_select”菜单应仅填充值“Spike”。该菜单当前填充了“Spike”和“Hit”的值。
关于如何修复我的函数rebuildIDSelect 以修复此错误的任何想法？
https://jsfiddle.net/dfahsjdahfsudaf/nL6q21g9/63/
谢谢。
编辑：“id_select”菜单应该只填充值 Spike，因为当您过滤项目 A 和小时 0、10、20 的整体数据表时。Spike 是表中列出的唯一值那些价值观。 Hit 仅与项目 A 和 Hours 0、10 相关联。因为 Hit 未在表中列为 Hour 20 的行。当用户选择 Hours 0,10 时，它不应显示在“id_select”菜单中，并且20 来自“hr_select”菜单。
【问题讨论】：
-
您能否说明为什么在您的示例中“id_select”菜单应该只填充值“Spike”？您使用的规则是什么？
-
@andrewJames 我已经编辑了我的问题来回答你的问题。我希望我的回答有意义。
标签： jquery datatables