如何在leaflet js中将图层更改事件分配给HTML select？

<select id="layerSelect">
  <option value="layer1">图层1</option>
  <option value="layer2">图层2</option>
  <option value="layer3">图层3</option>
</select>

var map = L.map('map');

// 创建图层控制器
var layerControl = L.control.layers().addTo(map);

// 将图层控制器与HTML select元素关联
document.getElementById('layerSelect').addEventListener('change', function(e) {
  var layerId = e.target.value;
  
  // 根据选择的图层ID，显示或隐藏相应的图层
  if (layerId === 'layer1') {
    map.addLayer(layer1);
    map.removeLayer(layer2);
    map.removeLayer(layer3);
  } else if (layerId === 'layer2') {
    map.removeLayer(layer1);
    map.addLayer(layer2);
    map.removeLayer(layer3);
  } else if (layerId === 'layer3') {
    map.removeLayer(layer1);
    map.removeLayer(layer2);
    map.addLayer(layer3);
  }
});

// 创建图层
var layer1 = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var layer2 = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png');
var layer3 = L.tileLayer('https://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png');

// 将图层添加到图层控制器中
layerControl.addBaseLayer(layer1, '图层1');
layerControl.addBaseLayer(layer2, '图层2');
layerControl.addBaseLayer(layer3, '图层3');