Drop down menu 如何在表更改时保存所选JS多选选项

嘿，每个人都有一个DataTable，我用它来显示一些数据，并尝试在下拉列表中加入所选的JS，以影响FE上向用户显示的内容。我能够让库正常工作并连接到DataTable没有问题，但现在我需要让其他列的下拉列表只反映从其他列中选择初始列后可用的内容。好消息是，我已经完成了一半的工作，但仍有一些问题需要解决

当我更新另一列时（假设我将列0设置为某个值，然后从列2中选择一个附加选项），第一个选定的项将从多重过滤器中删除。为了超级清除，表上的文件环仍然存在，但如果不再次单击col 0下拉列表查看它，选择它，最后将其删除，就无法知道它在那里。
在这种情况下，如何在选定的multiselect中持久化该项

2） 如果我执行上述操作并移除除第一个过滤器之外的所有过滤器，我将无法再取消过滤。例如，我在第0列中选择Rep 1，然后在第1列中选择一个区域（此时正在选择的Rep 1将消失），然后清除第1列中的区域并希望取消过滤Rep 1。在这一点上，我只能选择列0中的Rep 1，这使得在没有刷新的情况下无法看到其他人继续前进。甚至不知道这是怎么发生的，但猜测这与我在更新功能中的登录有关

我的功能代码：

const updateDropdowns = (activated_selector, column) => {
    console.log(activated_selector);
    console.log($(activated_selector));
    const tbl = $($(activated_selector).closest('table')[0]).dataTable();
    const values = $(activated_selector)
        .chosen()
        .val()
        .join('|');

    column.search(values.length > 0 ? '^(' + values + ')$' : '', true, false).draw();
    const dropDowns = $($(activated_selector).closest('table')[0]).find('select');
    console.log('==============');
    console.log(dropDowns);
    console.log('==============');
    const visibleDataApi = tbl
        .api()
        .rows({ filter: 'applied' })
        .data()
        .unique();
    const visibleData = [];

    for (let i = 0; i < visibleDataApi.length; i++) {
        visibleData[i] = [];
        for (let c = 0; c < visibleDataApi[i].length; c++) {
            visibleData[i][c] = visibleDataApi[i][c];
        }
    }
    $(dropDowns).each(function(index) {

        const newData = [];
        for (let i = 0; i < visibleData.length; i++) {
            newData.push(visibleData[i][index]);
        }


        if (this === activated_selector) {
            console.log('exiting');
            // exit if its the one that we are actively changinging

            $(this).trigger('chosen:updated');
            return;
        } else {
            // we need to update the filter here
            const distinctFilterData = newData
                .filter((value, dex) => newData.indexOf(value) === dex)
                .sort((a, b) => {
                    return a - b;
                });
            
            let newFilterOptions = `<option value=""></option>`;
            for (let i = 0; i < distinctFilterData.length; i++) {
                newFilterOptions += `<option value="${distinctFilterData[i]}">${distinctFilterData[i]}</option>`;
            }

            this.innerHTML = newFilterOptions;

            $(this).trigger('chosen:updated');

            let arr = [];
            console.log(
                'test',
                $(
                    $(activated_selector)
                        .parent()
                        .children()
                        .children()
                        .find('li.search-choice')
                        .children()
                        // .children()
                        .each(function(dex) {
                            if (this.innerHTML) {
                                arr.push(this.innerHTML);
                            }

                            // arr.push($(this[dex]).innerHTML);
                        })
                )
            );
            console.log(arr);
        }
        console.log('THIS', this);

const updateDropdowns=（已激活的选择器，列）=>{
控制台日志（激活的_选择器）；
console.log（$（已激活的_选择器））；
const tbl=$（$（已激活的_选择器）.closest（'table'）[0]）.dataTable（）；
常量值=$（已激活的\u选择器）
.selected（）
.val（）
.加入（“|”）；
column.search（values.length>0？'^（“+values+”）$”：“”，true，false）.draw（）；
常量下拉列表=$（$（已激活的_选择器）。最近（'table'）[0]）。查找（'select'）；
console.log（'==================='）；
console.log（下拉菜单）；
console.log（'==================='）；
常量visibleDataApi=tbl
.api（）
.rows（{filter:'applied'}）
.data（）
.unique（）；
常量visibleData=[]；
for（设i=0；inewData.indexOf（值）==dex）
.排序（（a，b）=>{
返回a-b；
});
让newFilterOptions=`；
for（设i=0；i

创建DataTable的我的代码：

    $(document).ready(function() {

        $('.select_box').chosen({
            disable_search_threshold: 10,
            no_results_text: 'Oops, nothing found!',
            width: '95%',
        });
    });


// All this is inside my component

            let tableFooter = '<tfoot><tr>';
            for (let i = 0; i < repOverviewData.headers.length; i++) {
                tableFooter += '<th style="padding-left:0px"></th>';
            }
            tableFooter += '</tr></tfoot>';
            $('#rep-overview').append(tableFooter);
            console.log(tableFooter);

            const repOverviewTable = $('#rep-overview').DataTable({
                columns: repOverviewData.headers,
                data: repOverviewData.data,
                // stateSave: true,
                dom:
                    '<"row"<"col-sm-4"B><"col-sm-4 tabletitle"><"col-sm-4"f>>t<"row"<"col-sm-4"i><"col-sm-8"p>><"row"<"col-sm-12"l>>',
                deferRender: true,
                colReorder: true,

                buttons: ['csv', 'colvis'],
                lengthMenu: [
                    [10, 50, 100, -1],
                    [10, 50, 100, 'All'],
                ],
                // scrollY: '200px',
                scrollCollapse: true,
                initComplete: function(settings, json) {
                    this.api()
                        .columns([0, 1, 2, 3])
                        .every(function() {
                            const column = this;
                            const select = $(
                                '<select multiple class="select_box" data-placeholder="Select Your Options"><option value=""></option></select>'
                            )
                                .appendTo($(column.footer()).empty())
                                .on('change', function() {
                                    // const val = $.fn.dataTable.util.escapeRegex($(this).val());
                                    // console.log(val);
                                    // column.search(val ? '^' + val + '$' : '', true, false).draw();
                                    updateDropdowns(this, column);
                                });
                            column
                                .data()
                                .unique()
                                .sort()
                                .each(function(d, j) {
                                    select.append('<option value="' + d + '">' + d + '</option>');
                                });
                        });
                },
            });

$（文档）.ready（函数（）{
$（'.选择框'）。已选择({
禁用搜索阈值：10，
无结果文本：“哎呀，什么也找不到！”，
宽度：“95%”，
});
});
//所有这些都在我的组件中
让tableFooter=''；
for（设i=0；i
                    <div className="table-header">Rep Overview</div>
                    <table
                        id="rep-overview"
                        className="table table-striped table-bordered row-border"
                        cellSpacing="0"
                        width="100%"
                    />