javascript - 如何使下拉选择触发叠加图像？

Question

我有两个下拉菜单。显示的图片会根据下拉选择发生变化。

我想这样当用户选择一种颜色然后选择叠加时，叠加图像显示在彩色图像的顶部而不是替换它。

我是 javascript 新手，不知道从哪里开始解决这个问题，所以任何洞察力都非常有帮助。

var changeColorImage = function() {
  document.getElementById('image').src = this.options[this.selectedIndex].value + "_Image.png"
}

var colorList = document.getElementById('ColorList');
colorList.addEventListener('change', changeColorImage, false);


var changeOverlayImage = function() {
  document.getElementById('image').src = this.options[this.selectedIndex].value + "_Image.png"
}

var overlayList = document.getElementById('OverlayList');
overlayList.addEventListener('change', changeOverlayImage, false);

img {
  margin: 50px;
  width: 100px;
}

<select id="ColorList">
  <option value="none">None</option>
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
</select>

<select id="OverlayList">
  <option value="overlay_1">Overlay 1</option>
  <option value="overlay_2">Overlay 2</option>
  <option value="overlay_3">Overlay 3</option>
</select>

<img id="image" src="none_Image.png" />

标签： javascripthtmldropdownoverlay