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 >

我还有一个全局数组，用于收集作业数据（包括每个作业的状态），并通过键，＃34; CID将其与地图上的网格单元相关联。＆＃34;

var JobsArray = [];

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

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

接下来，我得到用户的选择，然后搜索jobsArray中的每个项目，查看用户的状态选项是否与该作业的状态相匹配。如果是（并且该作业通过＆＃34; cid＆＃34;比较）匹配地图上的单元格，则它会调用图层上的.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()'s都返回所需的值。例如，如果我将状态更改为＆＃39; NEW＆＃39;，console.log(status)会返回值＆＃39; NEW＆＃39;并且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事件中。我认为状态可能是select的加载状态，并且在事件发生之前没有更新。

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;
});

Answer 2

问题可能来自getElementById。因为您想获得所选项目。试试这段代码。

    onEachFeature: function( feature, layer ){

    // move status fetch here
    var e = document.getElementById("Status");
    var status = e.options[e.selectedIndex].value;

    var id = feature.properties.CID;

    for(var i = 0; i < JobsArray.length; i++){
        if(JobsArray[i].status === status && JobsArray[i].cid === id) {
            layer.setStyle(highlightJob);
        }
    }
}

Answer 3

经过多次试验和错误后，我能够通过稍微替代的方法解决此问题。首先，当我在.setStyle();下使用document.getElementById("Status").onchange = function{...};传单方法时，确实在有限的程度上工作。但它只适用于一个（数组中的第一项）实例。我的下拉菜单也设置不正确。我最初使用

 <select class="dropdown menu">
  <option value="NEW">New</option>
  ....
 </select>

我将其更改为使用更标准的html下拉菜单列表，该列表允许用户单击子菜单列表中的实际项目。它现在看起来像

<ul class="dropdown-menu" aria-labelledby="dLabel">
              <li class="dropdown-submenu"><a class="test" tabindex="-1" href="#">Status <span class="caret"></span></a>
                <ul class="dropdown-menu" aria-labelledby="dLabel">   
                  <li class="new"><a tabindex="-1" href="#">New</a></li>
                  <li class="exported"><a tabindex="-1" href="#">Exported</a></li>
                  <li class="checkedin"><a tabindex="-1" href="#">Checked In</a></li>
                  <li class="posted"><a tabindex="-1" href="#">Posted</a></li>
                </ul>
              </li>

接下来，我创建了js变量，以显示要使用.setStyle();方法应用的不同高亮颜色。

var redJob = {
  fillColor: '#FF0000',
  fillOpacity: 0.5,
  weight: 0.25,
  dashArray: ''
};

var blueJob = {
  fillColor: '#038ef0',
  fillOpacity: 0.5,
  weight: 0.25,
  dashArray: ''
};

var greenJob = {
  fillColor: '#26b426',
  fillOpacity: 0.5,
  weight: 0.25,
  dashArray: ''
};

var purpleJob = {
  fillColor: '#b22ea3',
  fillOpacity: 0.5,
  weight: 0.25,
  dashArray: ''
};

最后，在onEachFeature:和JobsArray.forEach(function (item) {...}部分下，我只使用.on添加了点击事件处理程序。注意：当单击不同的状态选项时，我仍然在关闭点击处理程序，但到目前为止它仍然有效。如果有人可以给我一个关于如何处理点击不同状态选项的指针，请告诉我。

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

          JobsArray.forEach(function (item) {
            $(".new").on("click", function() {
              if (item.status === "NEW" && item.cid === id) {
                console.log("Victory");
                layer.setStyle(redJob);
              };
            });
            $(".exported").on("click", function() {
              if (item.status === "EXPORTED" && item.cid === id) {
                console.log("Victory");
                layer.setStyle(blueJob);
              };
            });
            $(".checkedin").on("click", function() {
              if (item.status === "CHECKEDIN" && item.cid === id) {
                console.log("Victory");
                layer.setStyle(greenJob);
              };
            });
            $(".posted").on("click", function() {
              if (item.status === "POSTED" && item.cid === id) {
                console.log("Victory");
                layer.setStyle(purpleJob);
              };
            });
          });

通过下拉菜单选项

3 个答案: