<select id="selectbox" data-selected="">
  <option value="" selected="selected" disabled="disabled">Select an image</option>
  <option value="1">Ocean Wall</option>
  <option value="2">Skate Park</option>
  <option value="3">Mountain View</option>
  <option value="4">Cityscape</option>
  <option value="5">Workshop</option>
</select>

<div class="images" data-selected="">
  <span class="loader">loading image...</span>
  <span class="no-selection">no image selected</span>
  <img src="https://picsum.photos/300/300/?image=280" data-image="1" alt="Ocean Wall" title="Ocean Wall" />
  <img src="https://picsum.photos/300/300/?image=281" data-image="2" alt="Skate Park" title="Skate Park" />
  <img src="https://picsum.photos/300/300/?image=282" data-image="3" alt="Mountain View" title="Mountain View" />
  <img src="https://picsum.photos/300/300/?image=283" data-image="4" alt="Cityscape" title="Cityscape" />
  <img src="https://picsum.photos/300/300/?image=284" data-image="5" alt="Workshop" title="Workshop" />
</div>

body {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

select {
  margin-bottom: 1em;
  padding: .25em;
  border: 0;
  border-bottom: 2px solid currentcolor; 
  font-weight: bold;
  letter-spacing: .15em;
  border-radius: 0;
  &:focus, &:active {
    outline: 0;
    border-bottom-color: red;
  }
}

.images {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px 3px 3px 3px;
  overflow: hidden;
  box-shadow: 0 20px 15px -15px rgba(#000, .5);
  img,
  .loader,
  .no-selection {
    display: none;
    letter-spacing: .15em;
    font-weight: bold;
  }
  &[data-selected=""]:not(.loading) {
    background: #eee;
    .no-selection {
      display: block;
    }
  }
  &.loading {
    background: #eee;
    .loader {
      display: block;
      animation: loading 1.5s linear;
    }
  }
}
@for $i from 1 through 5 {
  .images[data-selected="#{$i}"] {
    img[data-image="#{$i}"] {
      display: block;
    }
  }
}

@keyframes loading {
  to {
    letter-spacing: .25em;
  }
}

//----- jQuery Javascript---- //
// get the select box element and store it as '$selecBox'
var $selectbox = $("#selectbox");
// get the image container and store it as '$imageContainer'
var $imagecontainer = $(".images");
// get the current image selection
var selection = $selectbox.data("selected");

// listen for when the selection changes...
// when it does change, run our `changeImageSelection` function
$selectbox.on("change", changeImageSelection);

function changeImageSelection() {
  // change the `selection` variable to the selected option
  selection = $selectbox.val();
  // add a '.loading' class to the $imageContainer
  $imagecontainer.addClass("loading");
  // clear the $imageContainer's selected option
  $imagecontainer[0].dataset.selected = null;

  // set a timout of 1.5 seconds
  setTimeout(function() {
    // remove the '.loading' class from $imageContainer
    $imagecontainer.removeClass("loading");
    // add the currently selected option to $imageContainer
    $imagecontainer[0].dataset.selected = selection;
  }, 1500);
}

// ----- Plain Javascipt ---- //
// const selectbox = document.getElementById("selectbox");
// const imagecontainer = document.querySelector(".images");
// let selection = selectbox.dataset.selected;

// selectbox.addEventListener("change", e => {
//   selection = selectbox.value;
//   imagecontainer.classList.add("loading");
//   imagecontainer.dataset.selected = "";

//   setTimeout(() => {
//     imagecontainer.classList.remove("loading");
//     imagecontainer.dataset.selected = selection;
//   }, 1500);
// });