Javascript s以管理两个下拉列表的相互关联状态。加载页面后，首先使用的下拉列表被指定为“主要”下拉列表，另一个是“次要”下拉列表。每当用户从主下拉列表中选择新值时，我们必须清除次下拉列表；然后在应用主下拉过滤器之后，我们必须重新构建次下拉列表的值列表

最终结果是：

<script type="text/javascript">

/* Each drop-down selection affects the values in the other drop-downs */

var primaryColIdx;
var secondaryColIdx;

$(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
          populateDropdowns(this);
        }
    } );

} );

function populateDropdowns(table) {
    table.api().columns([1,2]).every( function () {
        var column = this;
        //console.log("processing col idx " + column.index());
        var select = $('<select><option value=""></option></select>')
            .appendTo( $(column.footer()).empty() )
            .on( 'change', function () {
                var dropdown = this;
                doFilter(table, dropdown, column);
                rebuildSecondaryDropdown(table, column.index());
            } );

        column.data().unique().sort().each( function ( val, idx ) {
            select.append( '<option value="' + val + '">' + val + '</option>' )
        } );
    } );
}

function doFilter(table, dropdown, column) {
    // first time a drop-down is used, it becomes the primary. This
    // remains the case until the page is refreshed:
    if (primaryColIdx == null) {
        primaryColIdx = column.index();
        secondaryColIdx = (primaryColIdx == 1) ? 2 : 1;
    }

    if (column.index() === primaryColIdx) {
        // reset all the filters because the primary is changing:
        table.api().search( '' ).columns().search( '' );
    }

    var filterVal = $.fn.dataTable.util.escapeRegex($(dropdown).val());
    //console.log("firing dropdown for col idx " + column.index() + " with value " + filterVal);
    column
        .search( filterVal ? '^' + filterVal + '$' : '', true, false )
        .draw();
}

function rebuildSecondaryDropdown(table, primaryColIdx) {
    var secondaryCol;

    table.api().columns(secondaryColIdx).every( function () {
        secondaryCol = this;
    } );

    // get only the unfiltered (unhidden) values for the "other" column:
    var raw = table.api().columns( { search: 'applied' } ).data()[secondaryColIdx];
    // the following uses "spread syntax" (...) for sorting and de-duping:
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
    var uniques = [...new Set(raw)].sort();

    var filteredSelect = $('<select><option value=""></option></select>')
        .appendTo( $(secondaryCol.footer()).empty() )
        .on( 'change', function () {
            var dropdown = this;
            doFilter(table, dropdown, secondaryCol);
            //rebuildSecondaryDropdown(table, column.index());
        } );

    uniques.forEach(function (item, index) {
        filteredSelect.append( '<option value="' + item + '">' + item + '</option>' )
    } );

}

</script>

/*每个下拉选择都会影响其他下拉列表中的值*/
初级大肠杆菌；
var secondaryColIdx；
$（文档）.ready（函数（）{
$（'#示例'）。数据表（{
initComplete:函数（）{
人口下降（本）；
}
} );
} );
函数填充下拉列表（表）{
table.api（）.列（[1,2]）.every（函数（）{
var列=此；
//log（“处理列idx”+列索引（））；
变量选择=$（“”）
.appendTo（$（column.footer（））.empty（））
.on（'change'，function（）{
var dropdown=此；
doFilter（表格、下拉列表、列）；
重建SecondaryDropdown（表，column.index（））；
} );
column.data（）.unique（）.sort（）.each（函数（val，idx）{
select.append（“”+val+“”）
} );
} );
}
函数doFilter（表格、下拉列表、列）{
//首次使用下拉列表时，它将成为主下拉列表
//在刷新页面之前保持不变：
if（primaryColIdx==null）{
primaryColIdx=column.index（）；
二次colidx=（一次colidx==1）？2:1；
}
if（column.index（）==primaryColIdx）{
//重置所有过滤器，因为主过滤器正在更改：
table.api（）.search（“”）.columns（）.search（“”）；
}
var filterVal=$.fn.dataTable.util.escapeRegex（$（下拉列表）.val（））；
//log（“col idx的触发下拉列表”+column.index（）+”，值为“+filterVal”）；
柱
.search（filterVal？“^”+filterVal+“$”：“”，true，false）
.draw（）；
}
函数重建SecondaryDropdown（表，primaryColIdx）{
二次芳香醇；
table.api（）.columns（secondaryColIdx）.every（函数（）{
secondaryCol=这个；
} );
//仅获取“其他”列的未筛选（未隐藏）值：
var raw=table.api（）.columns（{search:'applied'}）.data（）[secondaryColIdx]；
//以下使用“排列语法”（…）进行排序和重复数据消除：
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
var uniques=[…新集合（原始）].sort（）；
变量filteredSelect=$（''）
.appendTo（$（secondaryCol.footer（））.empty（））
.on（'change'，function（）{
var dropdown=此；
doFilter（表格、下拉列表、第二列）；
//重建SecondaryDropdown（表，column.index（））；
} );
uniques.forEach（功能（项目、索引）{
filteredSelect.append（“”+项+“”）
} );
}

如果有多个下拉列表怎么办？我有一个大约有40个下拉列表的可滚动表格，还有其他方法吗？@andQlimax-你是说40个相互依赖的下拉列表吗？（任何一个下拉列表中所选的值都会影响所有其他下拉列表中的可用值？）是的。但不确定是否有一种简单的管理方法（我使用的是jquery datatables，但无论如何仍需要更新下拉选项），如果您不介意我问一下-您有此要求的场景是什么？我认为这很不寻常，因为用户实际使用它可能会很复杂。或者，用另一种方式问这个问题：如果你有40个独立的下拉列表，你会损失什么？好的-明白。在这种情况下，这更像是向下钻取，而不是传统的过滤器（或者可能是两者的混合）。看看DataTables的新扩展。点击“添加条件”按钮，查看它的运行情况。如果这不是你前进的方向，那么它将是一个定制的JavaScript解决方案，具有类似Excel的UI。（或者，你可以问社区一个新问题——他们可能有比我想象的更好的方法）。如果有几个下拉列表呢？我有一个大约有40个下拉列表的可滚动表格，还有其他方法吗？@andQlimax-你是说40个相互依赖的下拉列表吗？（任何一个下拉列表中所选的值都会影响所有其他下拉列表中的可用值？）是的。但不确定是否有一种简单的管理方法（我使用的是jquery datatables，但无论如何仍需要更新下拉选项），如果您不介意我问一下-您有此要求的场景是什么？我认为这很不寻常，因为用户实际使用它可能会很复杂。或者，用另一种方式问这个问题：如果你有40个独立的下拉列表，你会损失什么？好的-明白。在这种情况下，这更像是向下钻取，而不是传统的过滤器（或者可能是两者的混合）。看看DataTables的新扩展。点击“添加条件”按钮，查看它的运行情况。如果这不是你前进的方向，那么它将是一个定制的JavaScript解决方案，具有类似Excel的UI。（或者，你可以问社区一个新问题——他们可能有比我想象的更好的方法）。

columns( { search: 'applied' } ).data()[index]

<script type="text/javascript">

/* Each drop-down selection affects the values in the other drop-downs */

var primaryColIdx;
var secondaryColIdx;

$(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
          populateDropdowns(this);
        }
    } );

} );

function populateDropdowns(table) {
    table.api().columns([1,2]).every( function () {
        var column = this;
        //console.log("processing col idx " + column.index());
        var select = $('<select><option value=""></option></select>')
            .appendTo( $(column.footer()).empty() )
            .on( 'change', function () {
                var dropdown = this;
                doFilter(table, dropdown, column);
                rebuildSecondaryDropdown(table, column.index());
            } );

        column.data().unique().sort().each( function ( val, idx ) {
            select.append( '<option value="' + val + '">' + val + '</option>' )
        } );
    } );
}

function doFilter(table, dropdown, column) {
    // first time a drop-down is used, it becomes the primary. This
    // remains the case until the page is refreshed:
    if (primaryColIdx == null) {
        primaryColIdx = column.index();
        secondaryColIdx = (primaryColIdx == 1) ? 2 : 1;
    }

    if (column.index() === primaryColIdx) {
        // reset all the filters because the primary is changing:
        table.api().search( '' ).columns().search( '' );
    }

    var filterVal = $.fn.dataTable.util.escapeRegex($(dropdown).val());
    //console.log("firing dropdown for col idx " + column.index() + " with value " + filterVal);
    column
        .search( filterVal ? '^' + filterVal + '$' : '', true, false )
        .draw();
}

function rebuildSecondaryDropdown(table, primaryColIdx) {
    var secondaryCol;

    table.api().columns(secondaryColIdx).every( function () {
        secondaryCol = this;
    } );

    // get only the unfiltered (unhidden) values for the "other" column:
    var raw = table.api().columns( { search: 'applied' } ).data()[secondaryColIdx];
    // the following uses "spread syntax" (...) for sorting and de-duping:
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
    var uniques = [...new Set(raw)].sort();

    var filteredSelect = $('<select><option value=""></option></select>')
        .appendTo( $(secondaryCol.footer()).empty() )
        .on( 'change', function () {
            var dropdown = this;
            doFilter(table, dropdown, secondaryCol);
            //rebuildSecondaryDropdown(table, column.index());
        } );

    uniques.forEach(function (item, index) {
        filteredSelect.append( '<option value="' + item + '">' + item + '</option>' )
    } );

}

</script>