How to trigger an event ONLY if both dropdowns are selected?

Question

I have a dropdown select list on my page of class="TypeFilter".

I have a jQuery event that fires when a value in that list is selected.

$(".TypeFilter").change(function() 
{
    // Extract value from TypeFilter and update page accordingly
));

I now have to add another list to the page, and I want to implement functionality which will prevent the .change(function() from running unless both are selected.

In both lists the first option in the list is some text instructing the user to select one of the items, so I was thinking of just writing some logic to test that both lists have a selected index greater than 0.

I think this is a touch unclean though, especially considering that other pages that have a TypeFilter use the same logic.

Is there any nifty functionality in jQuery that can do this?

edit I should specify that the user needs to be able to update the page by selecting either dropdown, so I can't put the onchange on the second element and test that the first element has a selected value, as suggested in one of the answers

Answer 1

As you partly mention, put the onchange on the second element and test that the first element has a selected value before you fire off any logic.

Answer 2

If you bind the same event to all dropdowns, you can get a collection of all the dropdowns and check that all of them are selected. Example:

$('.Dropdown').change(function(){
  var elements = $('.Dropdown');
  if (
    elements.filter(function(){
      return this.selectedIndex > 0;
    }).length == elements.length
  ) {
    // all dropdowns are selected
  }
});

Answer 3

Use bind instead, and as the eventdata, send a function that checks that either that both are selected or that the other is selected. Untested code:

function checker() {
    // test your conditions
}

$(".TypeFilter").bind('change', {test: checker}, function(event) 
{
    if (event.data.test && event.data.test()) {
        // Extract value from TypeFilter and update page accordingly
    }
));

This way the other pages that use the same function will not notice any changes.