javascript - 如何仅在选择两个下拉菜单时触发事件？

Question

我的 class="TypeFilter"页面上有一个下拉选择列表。

我有一个 jQuery 事件，当选择该列表中的值时会触发该事件。

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

我现在必须向页面添加另一个列表，我想实现阻止 .change(function() 运行的功能，除非两者都被选中。

在两个列表中，列表中的第一个选项是一些文本，指示用户选择其中一个项目，所以我想写一些逻辑来测试两个列表的选定索引是否大于 0。

我认为这有点不干净，尤其是考虑到其他具有 TypeFilter 的页面使用相同的逻辑。

jQuery 中是否有任何漂亮的功能可以做到这一点？

编辑 我应该指定用户需要能够通过选择任一下拉列表来更新页面，所以我不能将 onchange 放在第二个元素上并测试第一个元素是否有所选值，如其中一个答案中所建议的

Answer 1

如果您将同一事件绑定(bind)到所有下拉菜单，您可以获得所有下拉菜单的集合并检查是否所有下拉菜单都被选中。示例:

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