jquery - Tablesorter filter - multiple drop down in the same table header cell -

i using tablesorter filter widget in project. working fine 1 drop down list in table header.

now want two(2) drop down list in same table header cell.

my current code [edited] -

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

option 1 drop down show -
test
test1
test2

option 2 drop down show -
opt
opt1
opt2

when user select 'test' 1st drop down, display following values. if users select other value bring related values displayed values.

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

from above displayed value, if user select 'opt1' dropdown no value display if select 'opt', display above value.

how can add drop down in same table header data <span> element same data cell?

thanks