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

Question

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

选择所有这些将为我提供制作 map 所需的数据。我想仅在选择这四个下拉选项后才运行drawMap 函数。

我知道可以执行以下操作；

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

如果发生多个事件，如何做到这一点？这个question似乎使用绑定(bind)寻找类似的解决方案，但开发人员建议这不是一个好的做法。

那么，还有什么其他方法可以解决这个问题呢？

更新我想通了。我会进行计数，在您做出选择的前四次中，它会递增，然后运行该函数，而对于后续更改，它会一次又一次地运行该函数。正是我所需要的。

count = 0
$(function() {
  $('.dropdown').change(function() {
    count = count + 1
    if (count > 4) {
      count = count - 1;
    }
    if (count == 4) {
      RUNFUNCTION();
    }

  });
});

Answer 1

假设您只想让所有三个都有一个值，并且后续更改一个就足以触发，您可以这样做

function RUNFUNCTION(vals) {
  console.log(vals);
}
var $vals = document.querySelectorAll(".mySelect");
var numVals = $vals.length;
$vals.forEach(function(sel) {
  sel.addEventListener("change", function(event) {
    var vals = [];
    document.querySelectorAll(".mySelect").forEach(function(sel) {
      if (sel.value) vals.push(sel.value);
    });
    if (vals.length == numVals) RUNFUNCTION(vals); 
  });
});

<select class="mySelect">
  <option value="">Please select</option>
  <option value="1.1">1.1</option>
  <option value="1.2">1.2</option>
  <option value="1.3">1.3</option>
</select>
<select class="mySelect">
  <option value="">Please select</option>
  <option value="2.1">2.1</option>
  <option value="2.2">2.2</option>
  <option value="2.3">2.3</option>
</select>
<select class="mySelect">
  <option value="">Please select</option>
  <option value="3.1">3.1</option>
  <option value="3.2">3.2</option>
  <option value="3.3">3.3</option>
</select>