javascript - 通过下拉菜单选择触发功能

Question

我试图根据用户在下拉菜单中选择的内容突出显示特定的网格单元格。首先，我有一些下拉菜单 html。

<select id="Status" class="dropdown-submenu">
  <option selected disabled>Status</option>
  <option value="NEW">New</option>
  <option value="EXPORTED">Exported</option>
  <option value="CHECKEDIN">Checked In</option>
  <option value="POSTED">Posted</option>
</select >

我还有一个全局数组，用于收集工作数据(包括每个工作的状态)并通过键“CID”将其与 map 上的网格单元相关联。

var JobsArray = [];    

然后我有一个 javascript 变量可以更改网格单元格的样式。

//variable to highlightJob cells
var highlightJob = {
  fillColor: '#FF0000',
  fillOpacity: 0.5,
  weight: 0.25,
  dashArray: ''
};

接下来，我获得用户的选择，然后搜索我的 jobsArray 中的每个项目，查看用户的状态选择是否与该工作的状态相匹配。如果是(并且该作业通过“cid”比较与 map 上的单元格相匹配)，则它会调用图层上的 .setStyle(highlightJob) 方法。

document.getElementById("Status").onchange = function() {
    var status = document.getElementById("Status").value;
    console.log(status);
};

onEachFeature: function( feature, layer ){
    var id = feature.properties.CID;

    JobsArray.forEach(function (item) {
        if(item.status === status && item.cid === id) {
            layer.setStyle(highlightJob);
        };
    return false;
});

如果我为 item.status 硬编码一个选项，例如

if(item.status === 'NEW' && item.cid === id) {... };

关键点似乎是在循环中获取 status 变量。

注意#2:这是对我的原始帖子的编辑。自上述内容以来，我尝试了其他解决方案，但似乎无法使 layer.setStyle(highlightJob); 部分正常工作。我添加了以下部分(和一些变体)来处理从用户在下拉菜单中的选择中获取当前状态值。所有 console.log() 的 都返回所需的值。例如，如果我将状态更改为“NEW”，console.log(status) 返回值“NEW”，而 console.log(stat) 返回值为 1。

console.log(status);
JobsArray.forEach(function (item) {
  if(item.status === 'NEW' && item.cid === id) {
    console.log('Yay');
    document.getElementById("Status").onchange = function() {
      var status = document.getElementById("Status").value;
      console.log(status);
      if(status === 'NEW') {
        layer.setStyle(highlightJob);
        console.log("Whew");
        stat = "1";
  // } else {
  //   layer.setStyle(resetStyle);
      };
      console.log(stat);
      var stat = "1";
      if(stat === "1") {
        console.log("yikes");
        layer.setStyle(highlightJob);
      };
    };
  };
  return false;
});

Answer 1

尝试移动 javascript 以将状态提取到 Feature 事件中。我认为状态可能是选择的加载状态，并且在事件发生之前没有更新。

onEachFeature: function( feature, layer ){

    // move status fetch here
    var status = document.getElementById("Status").value;

    var id = feature.properties.CID;

    JobsArray.forEach(function (item) {
        if(item.status === status && item.cid === id) {
            layer.setStyle(highlightJob);
        };
    return false;
});