jquery - JQuery Won't Filter Using a Value

Question

I'm trying to create a simple function that will tell me when all dropdown boxes in a div have been selected. The problem seems to be that the filter isn't selecting anything so the length is always at 0. Any idea what could be going on? Here's what I have so far:

JQuery

$('.month, .year').change(function () {
    var $this = $(this);
    var $empty = $this.parent().parent().find('.month, .year').filter('[value=""]').length;
    if ($empty == 0) {
        alert('there are no empty dropdowns');
    }
});

HTML

<form class="date_catcher">
    <div style="display:inline;" class="start">
        <select class='input-small month' name='month'>
            <option value='' selected='selected'>---</option>
            <option value='0'>Jan</option>
        </select>
        <select class='input-small year' name='year'>
            <option value='' selected='selected'>----</option>
            <option value="2012">2012</option>
        </select>
    </div>

    <div style="display:inline;" class="end">
        <select class='input-small month' name='month'>
            <option value='' selected='selected'>---</option>
            <option value='0'>Jan</option>
        </select>
        <select class='input-small year' name='year'>
            <option value='' selected='selected'>----</option>
            <option value="2012">2012</option>
        </select>
    </div>
</form>

Thanks for your help!

Answer 1

try this -

var $empty = $this.closest('form').find('.month, .year').filter(function(){
  return this.value === "";
}).length;

Demo --> http://jsfiddle.net/J8x5X/

Answer 2

$(".date_catcher select").change(function(){
    $empty = $(".date_catcher option").filter(":selected").filter("[value='']").size();
    if($empty == 0){
        alert("there are no empty dropdowns");
    }
});