How to use Tablesorter for Select?

I'm trying to use tablesorter.js to sort a column by a select box. I can't seem to make it work and I've tried most of the stuff written either here or in the docs. Was wondering if someone could help me out with this.

I'm using Django which shouldn't matter I think, but here is the HTML and JS:

HTML:

                      <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        {% if perms.directors.director %}
                            <th></th>
                        {% endif %}
                        <td class="">     
                            <select  class="" >
                                <option value=""></option>
                                <option value="Incomplete">Incomplete</option>
                                <option value="Submitted">Submitted</option>
                                <option value="OnHold">OnHold</option>
                                <option value="Qualified">Qualified</option>
                                <option value="Denied">Denied</option>
                            </select>
                        </td>
                    </tr>
                </thead>
                <tbody>
                    {% for org in object_list %}
                    <tr class="{{ forloop.counter|divisibleby:2|yesno:"even,odd" }}">
                        <td><a href="{{ org.get_absolute_url }}">{{ org.name }}</a></td>
                        <td>{{ org.submission_date | date:"Y/m/d" }}</td>
                        <td>{{ org.updated_date | date:"Y/m/d" }}</td>
                        {% if perms.directors.director %}
                            <td>{{ org.review_note_date | date:"Y/m/d" }}</td>
                        {% endif %}
                        <td>
                    
                            <span class="label {{  org.bootstrap_color_state }}">
                            {{ org.pretty_state }}</span>
                        </td>
                        <td>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>

JS:

  $('.table').each(function () {
    var $table;
    $table = $(this);

    $table.find('a').not('.btn').closest('td, th').css({
        'padding': 0
    });

    $table.find('.amount').addClass('text-right');

    // Adds tablesorter plugin to .table, so to sort on <th>s
    $table.tablesorter().addClass('tablesorter');
    

    

    // Add up/down arrows to indicate which order column data is displayed
    $table.bind('sortEnd', function (event, table) {
        $(table).find('.glyphicon').remove();
        $(table).find('.tablesorter-headerAsc > div').append('<span class="glyphicon glyphicon-chevron-up" />');
        $(table).find('.tablesorter-headerDesc > div').append('<span class="glyphicon glyphicon-chevron-down" />');
    });

});