Multiple filter and sort in jQuery

Question

I have two jQuery functions that work fine individually. Function A below, shows all, complete, incomplete items depending on the selection and it works fine. Function B show items according to the category(option) they belong to.

I now want to combine the two so that the filter works in this manner. User selects function B and selects the option and then the user can further refine, to see all items, completed or incomplete items only in the selected option.

JSFiddle

Function A:

$('.sort').click(function(){
        var _t=$(this);
        $('.sort').removeClass('active');
        $(this).addClass('active');
        if(_t.hasClass('showall')){
            $('li.todo').show();
        }else if(_t.hasClass('complete')){
            $('li.todo').show();
            $('li.todo').filter(function(){
                return !!$(this).find('span.uncheck_box').length;
            }).hide();
        }else if(_t.hasClass('incomplete')){
            $('li.todo').show();
            $('li.todo').filter(function(){
                return !!$(this).find('span.check_box').length;
            }).hide();
        }

    });

Function B (dropdown):

$('.itemage').change(function(){
        var select_val=$(this).val();
        if($(this).val()=='10'){
            $('li.todo').show();
        }else{
            $('li.todo').hide();
            $('li.todo').filter(function(){
                if($(this).attr('itemage')==select_val)
                    return true;
                else
                    return false;
            }).show();
        }
    });

Answer 1

You could trigger the handler of another event in your current handler by using trigger() method, the other option is combining the 2 handlers and listening to click event, if I have understood the question correctly something like the following should work:

$('.sort, .itemage').on('click', function (e) {
    var $this = $(this).hasClass('sort') 
                ? $(this).addClass('active') 
                : $('.sort.active');

    var itemage = $('.itemage').val(),
        b = itemage == 10;

    $('.sort').not($this).removeClass('active');

    if ($this.hasClass('showall')) {
        $('li.todo').hide().filter(function () {
            return (this.getAttribute('itemage') === itemage || b);
        }).show();
        return;
    }

    var sel = $this.hasClass('incomplete') 
              ? 'span.uncheck_box'
              : 'span.check_box';

    $('li.todo').hide().filter(function () {
        return (this.getAttribute('itemage') === itemage || b) 
               && !! $(this).find(sel).length;
    }).show();
});

http://jsfiddle.net/m5GWz/

Answer 2

I Updated you code with "showall" and "complete" exemple, change class="complete" to data-stat="complete" to simplify detecting what we need.

There is many other method more useful for this filter style, but if you will have only two option, this will be simple to use too.