Javascript 单击“选择”按钮上的选项时如何显示图像？

我刚开始参加Freecodecamp课程，我一直在做一份调查表格。 我想让选择按钮在用户选择主题时显示图像

我不认为我的CSS HTML新手知识可以做到这一点。我希望Javascript或Jquery方面的知识渊博的人能在这方面帮助我，如果这可以用这些语言完成的话

我在我的代码笔上发布了以下内容：

让我们知道你喜欢什么

主题
惊奇宇宙
化妆舞会
皮诺阿科
那是70年代的节目
糖果厂

让我们知道你喜欢什么

主题
惊奇宇宙
化妆舞会
皮诺阿科
那是70年代的节目
糖果厂
功能myFunction（itm）{
如果（itm==“惊奇宇宙”）{
document.body.style.backgroundImage=“url（'pathto-MarvelUniverse.jpg'）”；
}else if（itm==“假面舞会”）{
document.body.style.backgroundImage=“url（'pathto-masqueradeBall.jpg'）”；
}否则如果（itm==“皮诺亚科”）{
document.body.style.backgroundImage=“url（'pathto-PinoyAko.jpg'）”；
}否则如果（itm==“70sShow”）{
document.body.style.backgroundImage=“url（'pathto-70sShow.jpg'）”；
}else if（itm==“CandyFactory”）{
document.body.style.backgroundImage=“url（'pathto-CandyFactory.jpg'）”；
}否则{
document.body.style.backgroundColor=“#000000”；
}
};

让我们知道你喜欢什么

主题
惊奇宇宙
化妆舞会
皮诺阿科
那是70年代的节目
糖果厂
功能myFunction（itm）{
如果（itm==“惊奇宇宙”）{
document.body.style.backgroundImage=“url（'pathto-MarvelUniverse.jpg'）”；
}else if（itm==“假面舞会”）{
document.body.style.backgroundImage=“url（'pathto-masqueradeBall.jpg'）”；
}否则如果（itm==“皮诺亚科”）{
document.body.style.backgroundImage=“url（'pathto-PinoyAko.jpg'）”；
}否则如果（itm==“70sShow”）{
document.body.style.backgroundImage=“url（'pathto-70sShow.jpg'）”；
}else if（itm==“CandyFactory”）{
document.body.style.backgroundImage=“url（'pathto-CandyFactory.jpg'）”；
}否则{
document.body.style.backgroundColor=“#000000”；
}
};

因此我为您的图像添加了一个占位符。 之后，我编写了一个函数，在更改下拉列表时显示图像。如果您希望每个主题都有一个特定的图像，那么您需要扩展此功能。此时，我仅在假面舞会上显示一个图像

函数showImage（图像）{
var a=document.getElementById（'img'）；
如果（图像==“”）{
a、 src=“”；
}else if（图像==“伪装球”）{
a、 src=”https://www.w3schools.com/tags/smiley.gif";
}
}

让我们知道你喜欢什么

主题
惊奇宇宙
化妆舞会
皮诺阿科
那是70年代的节目
糖果厂

因此我为您的图像添加了一个占位符。 之后，我编写了一个函数，在更改下拉列表时显示图像。如果您希望每个主题都有一个特定的图像，那么您需要扩展此功能。此时，我仅在假面舞会上显示一个图像

函数showImage（图像）{
var a=document.getElementById（'img'）；
如果（图像==“”）{
a、 src=“”；
}else if（图像==“伪装球”）{
a、 src=”https://www.w3schools.com/tags/smiley.gif";
}
}

让我们知道你喜欢什么

主题
惊奇宇宙
化妆舞会
皮诺阿科
那是70年代的节目
糖果厂

var myMap=newmap（）；
myMap.set（“神奇世界”https://www.w3schools.com/tags/smiley.gif")
myMap.set（“伪装球”https://www.w3schools.com/tags/dog.gif")
myMap.set（“皮诺亚科”https://www.w3schools.com/tags/smiley.gif")
myMap.set（“70sShow”https://www.w3schools.com/tags/car.gif")
myMap.set（“CandyFactory”https://www.w3schools.com/tags/cat.gif")
函数showImage（值）{
var a=document.getElementById（'dropdown'）.value；
警报（a）
src=myMap.get（a）；
document.getElementById（“img”）.innerHTML=img.src
}
主题
惊奇宇宙
化妆舞会
皮诺阿科
那是70年代的节目
糖果厂

var myMap=newmap（）；
myMap.set（“神奇世界”https://www.w3schools.com/tags/smiley.gif")
myMap.set（“伪装球”https://www.w3schools.com/tags/dog.gif")
myMap.set（“皮诺亚科”https://www.w3schools.com/tags/smiley.gif")
myMap.set（“70sShow”https://www.w3schools.com/tags/car.gif")
myMap.set（“CandyFactory”https://www.w3schools.com/tags/cat.gif")
函数showImage（值）{
var a=document.getElementById（'dropdown'）.value；
警报（a）
src=myMap.get（a）；
document.getElementById（“img”）.innerHTML=img.src
}
主题
惊奇宇宙
化妆舞会
皮诺阿科
那是70年代的节目
糖果厂

试试这个

$（'#下拉列表'）。在（'change'，function（）上{
$（'.mySlides'）.hide（）；
开关（此.value）{
“奇迹世界”案例：
$（'.marvel'）.show（）；
打破
“假面舞会”一案：
$（'.masquerade'）.show（）；
打破
“皮诺亚科”案：
$（'.pinoy'）.show（）；
打破
案例“70sShow”：
$（'.show'）.show（）；
打破
案例“CandyFactory”：
$（'.candy'）.show（）；
打破
违约：
//无所事事
}
})

.mySlides{display:none；}

让我们知道你喜欢什么

主题
惊奇宇宙
伪装