如何使 HTML 中的下拉菜單顯示多個圖像？

Question

我希望下拉菜單上的每個選擇都顯示多個內容。 如果選擇sensor 1，則需要顯示sensor 1 的位置圖片和sensor 1 的地址。 我不知道如何將多個功能添加到下拉菜單選項中，所以我嘗試將地址設為圖像並嘗試使用單個選項顯示多個圖像。 傳感器 2 和傳感器 3 也是如此，但我們只使用傳感器 1。

 <select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);$('#imageToSwap2').attr('src', this.options[this.selectedIndex].value);">
<option value="https://i.imgur.com/KxkwWjO.png" value="https://i.imgur.com/L8fx0iM.png"  selected>Sensor 1</option>
<option value="https://i.imgur.com/DjIuGQ0.png">Sensor 2</option>
<option value="https://i.imgur.com/IZ7FoQN.png">Sensor 3</option>
</select><img id="imageToSwap" class="profile" src="https://i.imgur.com/KxkwWjO.png"><img id="imageToSwap2" class="profile" src="https://i.imgur.com/L8fx0iM.png">

Answer 1

你不能做這樣的事情嗎？

<img id="img" src=''/>
<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction()">
  <option value="Audi">Audi</option>
  <option value="BMW">BMW</option>
  <option value="Mercedes">Mercedes</option>
  <option value="Volvo">Volvo</option>
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  document.getElementById("demo").innerHTML = "You selected: " + x;
  document.getElementById("img").src='pic_bulboff.gif'
}
</script>