Question

我的class =“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，并作为eventdata发送一个函数，该函数检查两者是否已被选中或另一个被选中。未经测试的代码：

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

这样，使用相同功能的其他页面将不会注意到任何更改。

如果选择了两个下拉菜单，如何触发事件？

3 个答案: