通過下拉菜單選項觸發功能

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

var JobsArray = [];  

然後我有一個javascript變量，它改變了網格單元格的樣式。

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

接下來，我得到了用戶的選擇，然後通過我的jobsArray每個項目搜索，看看如果用戶的狀態選擇該作業的狀態相匹配。如果確實如此（並且該作業通過「cid」比較匹配地圖上的單元格），則它會調用圖層上的.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正在返回所需的值。舉例來說，如果我狀態更改爲「NEW」，該console.log(status)返回值「NEW」和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

經過多次試驗和錯誤，我能夠通過使用一種稍微替代方法來解決此問題。首先，當我使用.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); 
       }; 
      }); 
      });     

Answer 2

的console.log(stat)返回值嘗試將javascript來獲取身份進入功能的事件。我認爲狀態可能是選擇的加載狀態，並且在事件之前沒有更新。

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 3

也許問題來自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); 
     } 
    } 
}