Tablesorter过滤器 - 在同一个表头单元格中多次下拉

Question

我在项目中使用Tablesorter过滤器小部件。它在表标题中有一个下拉列表正常工作。

现在我想在同一个表格标题单元格中输入两（2）个下拉列表。

我目前的代码如[编辑] -

<table>
<thead>
    <th> 
      <span class="filter-select filter-parsed" data-sorter="false" data-placeholder="Option_1.."></span> 
      <span class="filter-select filter-parsed" data-sorter="false" data-placeholder="Option_2.."></span>
    </th>
</thead>
<tbody>
<tr>
    <td>
       <span title="test">Option 1 Value</span>
       <span title="opt">Option 2 Value</span>
    </td>
</tr>
<tr>
    <td>
      <span title="test1">Option 1 Value1</span>
      <span title="opt1">Option 2 Value1</span>
    </td>
</tr>
<tr>
    <td>
      <span title="test2">Option 1 Value2</span>
      <span title="opt2">Option 2 Value2</span>
    </td>
</tr>
</tbody>
</table>

选项1下拉列表将显示 -
测试
test1
test2

选项2下拉列表将显示 -
选择 opt1
OPT2

当用户从第一个下拉菜单中选择“测试”时，它将显示以下值。如果用户选择其他值，它将从显示的值中带来相关值。

<table>
    <thead>
        <th> 
          <span class="filter-select filter-parsed" data-sorter="false" data-placeholder="Option_1.."></span> 
          <span class="filter-select filter-parsed" data-sorter="false" data-placeholder="Option_2.."></span>
        </th>
    </thead>
    <tbody>
    <tr>
        <td>
           <span title="test">Option 1 Value</span>
           <span title="opt">Option 2 Value</span>
        </td>
    </tr>
    </tbody>
</table>

从上面显示的值中，如果用户从下拉列表中选择“opt1”，则不会显示任何值，但如果选择“选择”，则会显示上述值。

如何在同一个表头中添加另一个下拉列表，它将从同一数据单元格中的另一个<span>元素中获取数据？

由于