Javascript 与数据表相关的（级联）下拉列表

我正在尝试使用datatables获得一些相关的级联下拉列表。应该发生的是，在您从第一个下拉列表中选择后，第二个下拉列表将仅填充相关选项

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

以下是我绘制表格的方式：

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

datatable呈现并工作良好。以下是我尝试的HTML和下拉列表脚本：

HTML:

JS:

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

真的，我不知道

---

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

我不知道如何让我的技术发挥作用，但我遇到了一个Datatables插件，它的工作非常出色：

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

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

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>' )
 } );
 } );