Функция запуска после выбора нескольких выпадающих меню

Question

Я пытаюсь создать панель управления картой, используя D3 - есть четыре выпадающих списка, которые пользователь должен выбрать. Каждый из этих выпадающих списков будет отфильтровывать различные параметры из большого набора данных.

Выбор всех из них даст мне данные, необходимые для создания карты. Я хотел бы запустить функцию drawMap только после того, как были выбраны эти четыре выпадающих параметра.

Я знаю, что можно сделать ниже;

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

Как это сделать в случае нескольких событий? Этот вопрос , похоже, ищет похожее решение с использованием bind, но разработчики предполагают, что это не очень хорошая практика.

В таком случае, как еще можно решить эту проблему?

ОБНОВЛЕНИЕ Я понял это. Я веду счет, в течение первых четырех раз, когда вы делаете выбор, он увеличивает, а затем запускает функцию, а для последующих изменений - запускает функцию снова и снова. Именно то, что мне было нужно.

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

  });
});

Answer 1

Решением было бы заполнение объекта значениями формы каждый раз, когда значение изменяется, и запуск функции только в том случае, если ваш объект не содержит нулевых значений.

Вы можете использовать FormData для получения значений.

Вот так:

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

Answer 2

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

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>