how to show an image when a an option on select button is click?

I just started taking Freecodecamp course, and I am stuck on doing a survey form. I wanted for the Select buttons to show an image when user pick a theme.

I don't think my newbie knowledge on CSS HTML could do that. I hope someone knowledgable on Javascript or Jquery could help me on this one if this can be done using those language.

I have this posted on my codepen : https://codepen.io/remevan/pen/poogBeK

<div id="themeField">
  <div id=leftField>
    <div id="containerA">
      <p> Let us know what is your preferred
        <select id="dropdown">
      </p>
      <option disabled value selected>THEME</option>
      <option value="MarvelUniverse">Marvel Universe</option>
      <option value="masqueradeBall">Masquerade Ball</option>
      <option value="PinoyAko">Pinoy Ako</option>
      <option value="70sShow">That 70's Show</option>
      <option value="CandyFactory">Candy Factory</option>
      </select>

Solution

<body>
<div id="themeField">
  <div id=leftField>
    <div id="containerA">
      <p> Let us know what is your preferred
        <select id="dropdown" onchange="myFunction(this.value)">
      </p>
      <option disabled value selected>THEME</option>
      <option value="MarvelUniverse">Marvel Universe</option>
      <option value="masqueradeBall">Masquerade Ball</option>
      <option value="PinoyAko">Pinoy Ako</option>
      <option value="70sShow">That 70's Show</option>
      <option value="CandyFactory">Candy Factory</option>
      </select>
      <div id = "sampleImg"></div>
</div>
</div>
</div>
</body>
<script>
function myFunction(itm){
 if (itm == "MarvelUniverse"){
      document.body.style.backgroundImage = "url('pathto-MarvelUniverse.jpg')";
 } else  if (itm == "masqueradeBall"){
      document.body.style.backgroundImage = "url('pathto-masqueradeBall.jpg')";
 } else  if (itm == "PinoyAko"){
      document.body.style.backgroundImage = "url('pathto-PinoyAko.jpg')";
 } else  if (itm == "70sShow"){
      document.body.style.backgroundImage = "url('pathto-70sShow.jpg')";
 } else  if (itm == "CandyFactory"){
      document.body.style.backgroundImage = "url('pathto-CandyFactory.jpg')";
 } else {
   document.body.style.backgroundColor = "#000000";
 }
};
</script>

try this

<body>
<div id="themeField">
  <div id=leftField>
    <div id="containerA">
      <p> Let us know what is your preferred
        <select id="dropdown" onchange="myFunction(this.value)">
      </p>
      <option disabled value selected>THEME</option>
      <option value="MarvelUniverse">Marvel Universe</option>
      <option value="masqueradeBall">Masquerade Ball</option>
      <option value="PinoyAko">Pinoy Ako</option>
      <option value="70sShow">That 70's Show</option>
      <option value="CandyFactory">Candy Factory</option>
      </select>
      <div id = "sampleImg"></div>
</div>
</div>
</div>
</body>
<script>
function myFunction(itm){
 if (itm == "MarvelUniverse"){
      document.body.style.backgroundImage = "url('pathto-MarvelUniverse.jpg')";
 } else  if (itm == "masqueradeBall"){
      document.body.style.backgroundImage = "url('pathto-masqueradeBall.jpg')";
 } else  if (itm == "PinoyAko"){
      document.body.style.backgroundImage = "url('pathto-PinoyAko.jpg')";
 } else  if (itm == "70sShow"){
      document.body.style.backgroundImage = "url('pathto-70sShow.jpg')";
 } else  if (itm == "CandyFactory"){
      document.body.style.backgroundImage = "url('pathto-CandyFactory.jpg')";
 } else {
   document.body.style.backgroundColor = "#eeeeee";
 }
};
</script>