JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="post">
  <select name="var1" class="form-control">
    <option value="0">0</option>
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
    <option value="100">100</option>
  </select>

  <select name="var2" class="form-control">
    <option value="0">0</option>
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
    <option value="100">100</option>
  </select>
  <input type="submit" name="submit" value="Submit" />
</form>
<script>
  var form = document.querySelector("form");
    form.addEventListener("submit", function(e) {
      e.preventDefault();
      var data = new FormData();
      var selects = e.target.querySelectorAll(".form-control");
      var values = [];
      for (var i = 0; i < selects.length; i++) {
        if (selects[i].value != 0) {
          values.push([selects[i].name, selects[i].value])
        };       
      };
      if (values.length) {
      values.forEach(function(val) {
        data.append(val[0], val[1])
      })
      var request = new XMLHttpRequest();
      request.open("POST", "/echo/js/")
      request.onload = function() {
        values = [];
        console.log(data);
        for (prop of [...data]) {
          console.log(prop)
        }
      }
      request.send(data)
      }
    }); 
</script>