选择多个下拉选项后运行功能答案

【问题标题】：Run function after multiple dropdown options have been chosen选择多个下拉选项后运行功能
【发布时间】：2018-10-29 09:32:18
【问题描述】：

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

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

我知道可以做到以下几点；

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

如何在多个事件的情况下做到这一点？这个question 似乎正在寻找使用绑定的类似解决方案，但开发人员认为这不是一个好习惯。

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

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

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

  });
});

【问题讨论】：

您可以简单地通过监听每个下拉菜单的更改以及一个确保所有 4 个都被选中的 if 语句来实现此目的。
我可以单独监听更改（我可以增加变量的计数，当计数达到下拉列表的数量时，我运行该函数），但 if 语句甚至不会执行在聆听变化之前？
这成功了！ count=0 $(function() { $('.dropdown').change(function() { count=count+1 if(count>4){ count=count-1; } if(count==4){ RUNFUNCTION(); } }); });
当你将一个改回无值时这将不起作用，它仍然会触发运行。查看我的版本

标签： javascript html d3.js dropdown

【解决方案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>

【讨论】：

我正在尝试构建仅在所有四个选项都已选择/选择的情况下才能运行的功能。以及其中之一的任何后续更改。
将 == 3 更改为 == 4 然后我的代码应该可以工作
啊！使用 HTML，它更有意义！谢谢。

【解决方案2】：

解决方案是在每次更改值时使用表单值填充对象并仅在您的对象不包含任何空值时运行函数。

您可以使用FormData 获取值。

像这样：

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

【讨论】：