具有数据表的相关（级联）下拉列表答案

【问题标题】：Dependent (Cascading) dropdowns with datatables具有数据表的相关（级联）下拉列表
【发布时间】：2014-12-18 18:57:45
【问题描述】：

我正在尝试让一些依赖（级联）下拉列表与我的数据表一起使用。应该发生的情况是，在您从第一个下拉列表中进行选择后，第二个下拉列表将仅填充相关选项。

例如，如果您在第一个下拉列表中选择“财务”作为类别，则第二个下拉列表中只有财务相关项目可用。

这是我绘制表格的方式：

$("#total_datatable").DataTable({  
  "ajax": {   
    "url":"quick_view.php",
    "type":"GET"
}  ,
   "paging":        true, 
  "sDom": '<"top">t<"bottom"><"clear">',
   "pageLength": 50,
"order": [[ 6, "desc" ]],
  "aoColumns": [
 { "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "","visible":false },

 { "bSortable": true,  "width": "20%", "sClass": "lang_body_2", "sTitle": "","visible":false },
  { "bSortable": true, "width": "20%", "sClass": "lang_body_2",  "sTitle": "Category"},
 { "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "Value" },
 { "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Database",},
 { "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "National Average"},
  { "bSortable": true, "width": "20%","sClass": "lang_body_2 index_num table_index","sTitle": "Index" },
  ],
});
});

数据表呈现和工作正常。这是我为下拉菜单尝试的 HTML 和脚本：

HTML：

 <div id="main_grouping_pick" class="col-md-4 col-xs-6" >

 <div id="category_pick" class="col-md-4 col-xs-6">

JS：

var table = $('#total_datatable').DataTable();

$("#main_grouping_pick").each( function ( i ) {
var select = $('<select><option value=""></option></select>')
  .appendTo( $(this).empty() )
  .on( 'change', function () {
    table.column( 1 )
      .search( $(this).val() )
      .draw();

 $("#category_pick").each( function ( i ) {
 var select = $('<select><option value=""></option></select>')
  .appendTo( $(this).empty() )
  .on( 'change', function () {
    table.column( 2)
      .search( $(this).val() )
      .draw();
  } );

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

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

发生的情况是我从第一个下拉列表中选择，第二个下拉列表出现，但包含所有可能的类别，而不仅仅是由于第一个下拉列表发生的过滤而出现在表中的类别。我猜第二个下拉列表是在我使用第一个下拉列表过滤之前获取值，或者我过滤的方式并没有真正使其他类别不可用。

真的，我不知道。

我们将不胜感激。

【问题讨论】：

标签： javascript jquery drop-down-menu datatables jquery-datatables

【解决方案1】：

我不知道如何让我的技术发挥作用，但我发现了一个用于 Datatables 的插件，它的作用就像一个魅力：

https://github.com/cyberhobo/ColumnFilterWidgets

【讨论】：