【发布时间】：2021-11-22 15:00:39
【问题描述】：
我的任务是创建一个带有两个自定义组合框的数据表页面。不幸的是，这没有灵活性，它们必须定制，但必须对应于它们各自的列。我无法让这两个组合框过滤下面的结果。我知道我的代码是错误的，但这是我现在所处的位置。为清楚起见，我希望能够同时使用两个组合框来过滤结果（例如：仅显示伦敦的项目经理）。
HTML
<select id="dropdown1">
<option value="">Select Position</option>
<option value="Investigator">Investigator</option>
<option value="Project Manager">Project Manager</option>
<option value="Data Analyst">Data Analyst</option>
<option value="Data Manager">Data Manager</option>
<option value="Other">Other</option>
</select>
<select id="dropdown2">
<option value="">Select Office</option>
<option value="London">London</option>
<option value="San Francisco">San Francisco</option>
</select>
<br>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>Investigator</td>
<td>Edinburgh</td>
<td>61</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Investigator</td>
<td>Tokyo</td>
<td>63</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Project Manager, Data Analyst</td>
<td>San Francisco</td>
<td>66</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Data Manager</td>
<td>London</td>
<td>22</td>
</tr>
<tr>
<td>Jim Kelly</td>
<td>Investigator, other</td>
<td>London</td>
<td>22</td>
</tr>
</tbody>
</table>
JavaScript
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Qlfrtip'});
$('#dropdown1').on('change', function () {
table.columns(1).search( this.value ).draw();
} );
$('#dropdown2').on('change', function () {
table.columns(2).search( this.value ).draw();
} );
});
【问题讨论】：
标签： javascript html jquery datatables