Javascript 如何使HTML中的下拉菜单显示多个图像？
我希望下拉菜单上的每个选项都显示多个内容。如果选择了传感器1，则需要显示传感器1位置和传感器1地址的图片。我不知道如何将多个功能添加到下拉菜单选项中，因此我尝试将地址设置为一个图像，并尝试用一个选择显示多个图像。传感器2和传感器3也是如此，但让我们只使用传感器1Javascript 如何使HTML中的下拉菜单显示多个图像？,javascript,html,Javascript,Html,我希望下拉菜单上的每个选项都显示多个内容。如果选择了传感器1，则需要显示传感器1位置和传感器1地址的图片。我不知道如何将多个功能添加到下拉菜单选项中，因此我尝试将地址设置为一个图像，并尝试用一个选择显示多个图像。传感器2和传感器3也是如此，但让我们只使用传感器1 <select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);$('#imageToSwap2').attr('s
<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">
传感器1
传感器2
传感器3
<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>
从列表中选择一辆新车
奥迪
宝马
梅赛德斯
沃尔沃汽车
选择新车时，会触发一个功能，输出所选车辆的值
函数myFunction（）{
var x=document.getElementById（“mySelect”）.value；
document.getElementById（“demo”）.innerHTML=“您选择：”+x；
document.getElementById（“img”）.src='pic_bulboff.gif'
}