如何在表更改中保存Chosen-JS Multi Select选项

如何解决如何在表更改中保存Chosen-JS Multi Select选项

嘿，每个人都有一个DataTable，我正在使用它来显示一些数据，并尝试将Chosen-JS与下拉列表绑定在一起，以影响在FE上向用户显示的内容。我能够使库正常工作并连接到DataTable，但是现在我需要让其他列的下拉列表仅反映从另一个中选择了首字母后的可用内容。好消息是我已经完成了一半，但仍有一些问题需要解决。

1. 当我更新另一列时（例如，我将col 0设置为某项，然后从列2中选择其他选择），首先选择的项将从多重过滤器中删除。要非常清楚，桌上的文件圈仍然存在，但是如果不再次单击col 0下拉列表来查看，选择并最终将其删除，则无法知道它是否存在。
   在这种情况下，如何将项目保留在选定的多选项目中？

2）如果我执行上述操作并删除了除第一个过滤器以外的所有过滤器，我将无法取消过滤。例如我在第0列中选择Rep 1，然后在第1列中选择一个区域（这是所选的Rep 1消失的地方），然后我清除第1列中的区域，并想要取消过滤Rep1。这时，我只能选择第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);

创建数据表的代码：

    $(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,'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 + '$' : '',false).draw();
                                    updateDropdowns(this,column);
                                });
                            column
                                .data()
                                .unique()
                                .sort()
                                .each(function(d,j) {
                                    select.append('<option value="' + d + '">' + d + '</option>');
                                });
                        });
                },});

HTML

                    <div className="table-header">Rep Overview</div>
                    <table
                        id="rep-overview"
                        className="table table-striped table-bordered row-border"
                        cellSpacing="0"
                        width="100%"
                    />