Run function after multiple dropdown options have been chosen

Question

I'm attempting to build a map dashboard using D3 - there are four dropdowns that the user has to select. Each of these dropdowns will filter out different parameters from a large dataset.

Selecting all of them will give me the data needed to make a map. I would like to run the drawMap function only after these four dropdown options have been chosen.

I know that one can do the below;

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

How does one do this in case of multiple events? This question seems to look for a similar solution using bind, but developers suggest that isn't good practice.

In that case, what other ways can one go about this problem?

UPDATE I figured this out. I keep a count, for the first four times you make a choice it increments and then runs the function, and for subsequent changes - it runs the function again and again. Exactly what I needed.

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

  });
});

You can simply achieve this by listening to the changes to each of the dropdowns followed by an if statement which ensures all 4 are selected. — Sivaprasad, Oct 29 '18 at 09:38
I can listen to the changes individually ( I can increase the count of a variable and when the count reaches the number of dropdowns, i run the function), but wouldn't the if statement be executed even before the listening of changes? — user10046100, Oct 31 '18 at 12:50
This worked! `count=0 $(function() { $('.dropdown').change(function() { count=count+1 if(count>4){ count=count-1; } if(count==4){ RUNFUNCTION(); } }); });` — user10046100, Oct 31 '18 at 12:57
That will not work when you change one back to no value, it will still trigger the run. See my version — mplungjan, Oct 31 '18 at 13:06

mplungjan · Accepted Answer · 2018-10-31T13:07:23.217

Assuming you just want all three to have a value and subsequent changes of one is enough to trigger, you could do

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>

I'm attempting to build something where the function runs ONLY if all the four options have been chosen/selected. And any subsequent changes of one of those. — user10046100, Oct 31 '18 at 12:47

score 0 · Answer 2 · answered Oct 29 '18 at 09:40

A solution would be to population an object with your form values each time a value is changed and run a function only if your object does not contains any null values.

You can use FormData to get the values.

Like so :

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

Run function after multiple dropdown options have been chosen

2 Answers2