Jquery Tablesorter filter and external select box

Question

I'm using tablesorter and the filter widget. I found this jsfiddle example that allows filtering entries with a select box (Filter by age). I want to add that select box to my example , but it doesn't work when simply adding

 $(".selectAge").bind('change', function (e) {
     var cols=[]
     cols[3] = $(this).val()
    $('table').trigger('search', [cols]);
 });

to my example code. Would you please tell me how to get the select box to work?

My example code is a copy from the official example .

Answer 1

It was working, it just didn't look like it. The one problem with the select is that the "reset" option needed an empty string as a value:

<select class="selectAge tablesorter-filter" data-column="3">
    <option class="reset" value="">Filter by age</option>
    <option>&gt;=25</option>
    <option>&lt;=25</option>
</select>

Here is an updated demo (all I changed was the select and added the blue theme css).

---

Update: Just so you know, in the next update, you can just give that select a "search" class name like the other input, and be sure to include a data-column="#" attribute, and have it work automatically when you use bindSearch , so there would not be a need to add extra code:

$.tablesorter.filter.bindSearch( $('#mytable'), $('.search') );