我的任务是创建一个带有两个自定义组合框的Datatable页面。不幸的是，这没有灵活性，它们必须自定义，但必须对应于各自的列。我很难得到这两个组合框来过滤下面的结果。我知道我的代码错了，但这就是我现在的处境。为了清晰起见，我希望能够同时使用两个组合框来过滤结果（例如：只显示伦敦的项目经理）。

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

 <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>

顺晟科技：

问题在于您在jQuery事件中调用，但从未初始化表变量。

要解决此问题，请在您的to中更改

请参见此工作示例: