如何在传单js中为HTML选择分配层更改事件

Question

我想用下拉选择来模拟单选按钮控件的单选按钮功能。(我尝试过selectLayers插件，但它已经5年没有更新了，也没有像预期的那样工作(。

目前，HTML select是从javascript中按下的，如下所示。

var legend = L.control({position: 'topright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend');
div.innerHTML = '<select><option value="allCities">All Cities</option><option value="cities">Cities</option><option value="badCities">Bad Cities</option></select>';
div.firstChild.onmousedown = div.firstChild.ondblclick = L.DomEvent.stopPropagation;
return div;
};
legend.addTo(map);

如何创建.change事件来更改图层，就像单选按钮的功能一样？

Fiddle

Answer 1

将层添加到对象，然后侦听change事件，只添加与选择值同名的层。

var selectLayers = {
cities, // same as cities: cities
badCities,
allCities
}

L.DomEvent.on(div,'change',function(e){
var select = e.target;
for(var name in selectLayers){
selectLayers[name].removeFrom(map);
}
selectLayers[select.value].addTo(map);
});

示例：https://jsfiddle.net/falkedesign/23wc9tL4/