javascript - 与数据表相关的(级联)下拉菜单

Question

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

例如，如果您在第一个下拉列表中选择“财务”作为类别，则第二个下拉列表中仅提供与财务相关的项目。

这是我绘制表格的方法:

$("#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>' )
 } );
 } );

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

说实话，我不知道。

如有任何见解，我们将不胜感激。

Answer 1

我不知道如何让我的技术发挥作用，但我遇到了一个数据表插件，它的作用就像一个魅力:

https://github.com/cyberhobo/ColumnFilterWidgets