Как инициировать событие ТОЛЬКО, если выбраны оба выпадающих меню?

Question

У меня есть список выпадающего списка на моей странице класса = "TypeFilter".

У меня есть событие jQuery, которое срабатывает, когда выбрано значение в этом списке.

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

теперь я должен добавить еще один список на странице, и я хочу, чтобы реализовать функциональность, которая позволит предотвратить .change(function() запуск, если оба не выбраны.

В обоих списках первый вариант в списке какой-то текст инструктирования пользователю выбрать один из пунктов, так что я думал просто написать некоторую логику, чтобы проверить, что оба списка имеют выделенный указатель больше 0.

Я думаю, что это нечистое прикосновение, особенно если учесть, что другие страницы с TypeFilter используют одну и ту же логику.

Есть ли отличная функциональность в jQuery, которая может это сделать?

Редактировать Я должен указать, что пользователь должен иметь возможность обновлять страницу, выбирая раскрывающийся список, поэтому я не могу поместить onchange на второй элемент и проверить, что первый элемент имеет выбранное значение, так как предлагается в одном из ответов

Answer 1

Если вы привязываете одно и то же событие ко всем выпадающим спискам, вы можете получить коллекцию всех выпадающих списков и проверить, что все они выбраны. Пример:

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

Answer 2

Как вы частично отметили, поставьте onchange на второй элемент и проверьте, что первый элемент имеет выбранное значение, прежде чем вы сработаете любую логику.

Answer 3

Используйте bind вместо этого, и как данныеСобытия, послать функцию, которая проверяет, что либо, что оба они выбраны или, что другой выбран. Неподтвержденный код:

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 
    } 
)); 

Таким образом, другие страницы, использующие ту же функцию, не будут замечать никаких изменений.