Triggering function by dropdown menu choice

Question

I am trying to highlight specific grid cells based on what a user chooses in a dropdown menu. First, I have some drop down menu 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 >

I also have a global array that collects the job data (including the status for each job) and relates it to a grid cell on the map through a key, "CID."

var JobsArray = [];    

Then I have a javascript variable that changes the style of the grid cell.

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

Next, I get the user's choice and then, searching through each item in my jobsArray, look to see if the user's status choice matches the status of that job. If it does (and that job matches a cell on the map through the "cid" comparison), then it calls the .setStyle(highlightJob) method on the layer.

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

This works if I hardcode a choice in for the item.status such as

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

The sticking point seems to be getting the status variable in the loop.

Note#2: This is an edit from my original post. I have tried additional solutions since the above but cannot seem to get the layer.setStyle(highlightJob); part to work. I added the below section (and a few variations) to handle getting the current status value from the user's choice in the dropdown menu. All of the console.log()'s are returning the desired values. For instance, if I change the status to 'NEW', the console.log(status) return the value 'NEW' and the console.log(stat) returns the value of 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

Try moving the javascript to fetch the status into the Feature event. I think the status might be the loaded state of the select and is not updating prior to the event.

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

Maybe the problem is coming from the getElementById. Because you want to get the selected item. Try this code.

    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

After much trial and error, I was able to resolve this issue by using a slightly alternative method. First, when I employed the .setStyle(); Leaflet method under document.getElementById("Status").onchange = function{...}; did actually work to a limited degree. But it only worked on one (the first item in the array) instance. I also had my dropdown menu set up incorrectly. I was originally using

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

I changed it to use the more standard html dropdown menu list that allows the user to click the actual item in the sub-menu list. It now looks like

<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>

Next, I created js variables to show different highlight colors to apply using the .setStyle(); method.

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: ''
};

Finally, under onEachFeature: and the JobsArray.forEach(function (item) {...} section, I just added click event handlers using .on . Note: I am still in the process of turning the click handlers off when a different status option is clicked, but so far it works. If anyone can give me a pointer on how to handle clicking on different status options, let me know.

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