Question

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

选择所有这些将为我提供制作地图所需的数据。仅在选择了这四个下拉选项后，我才想运行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>

Answer 2

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

您可以使用FormData来获取值。

就像这样：

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

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

2 个答案: