Leaflet 如何将图层更改事件分配给传单js中的HTML select？

我希望通过下拉选择模拟单选按钮控件的单选按钮功能。（我尝试过selectLayers插件，但它已经5年没有更新了，也没有按预期工作）

当前，从javascript中按HTML选择，如下所示

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

var legend=L.control（{position:'topright'}）；
legend.onAdd=函数（映射）{
var div=L.DomUtil.create（'div'，'info legend'）；
div.innerHTML='所有城市城市坏城市'；
div.firstChild.onmousedown=div.firstChild.ondblclick=L.DomEvent.stopPropagation；
返回div；
};
图例。添加到（地图）；

如何创建.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);
});

---

示例：

将层添加到对象，然后收听

更改事件，只添加与选择值同名的层

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

例如：