Javascript 选择多个下拉选项后运行函数

我正在尝试使用D3构建一个地图仪表板-用户必须选择四个下拉列表。每个下拉列表都将从大型数据集中过滤出不同的参数

选择所有这些将为我提供制作地图所需的数据。我只想在选择了这四个下拉选项之后运行drawMap函数

我知道一个人可以做到以下几点

document.getElementById("#idofdropdown").addEventListener("change",function(event){
  RUNFUNCTION();
});

在发生多个事件的情况下，如何做到这一点？这似乎是在寻找使用bind的类似解决方案，但开发人员认为这不是一个好做法

在这种情况下，还有什么其他方法可以解决这个问题

更新我发现了这一点。我保留一个计数，在您做出选择的前四次，它会递增，然后运行函数，对于后续的更改，它会一次又一次地运行函数。正是我需要的

count=0
$（函数（）{
$（'.dropdown'）.change（函数（）{
计数=计数+1
如果（计数>4）{
计数=计数-1；
}
如果（计数=4）{
RUNFUNCTION（）；
}
});
});

假设您只希望所有三个都有一个值，并且随后的一个更改足以触发，您可以这样做

函数运行函数（VAL）{
控制台日志（VAL）；
}
var$vals=document.querySelectorAll（“.mySelect”）；
var numVals=$vals.length；
$vals.forEach（功能（sel）{
选择addEventListener（“更改”，函数（事件）{
var VAL=[]；
document.querySelectorAll（“.mySelect”）.forEach（函数（sel）{
如果（选择值）推送值（选择值）；
});
if（vals.length==numVals）RUNFUNCTION（vals）；
});
});

请选择
1.1
1.2
1.3
请选择
2.1
2.2
2.3
请选择
3.1
3.2
3.3
解决方案是在每次更改值时使用表单值填充对象，并且仅当对象不包含任何空值时才运行函数

您可以使用来获取值

像这样：

data = {}
document.getElementById("#idofdropdown").addEventListener("change",function(event){
  data = document.getElementById("#myform");
  checkIfFormIsComplete(data);
});

您只需聆听对每个下拉列表的更改，然后是一个if语句，确保所有4个都被选中。我可以单独聆听更改（我可以增加变量的计数，当计数达到下拉列表的数量时，我运行函数），但是if语句不会在监听更改之前执行吗？这很有效<代码>计数=0$（函数（）{$（'.dropdown'）。更改（函数（）{count=count+1如果（计数>4）{count=count-1；}如果（计数==4）{RUNFUNCTION（）；}}）；}）当您将一个更改回无值时，它将不起作用，它仍将触发运行。查看我的版本我试图构建一个只有在所有四个选项都被选中/选中的情况下才能运行函数的东西。然后把
==3
改成
==4
，我的代码就可以用了！有了HTML，它就更有意义了！谢谢