如何使 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>