dropdown change image

by ian_smithz

HTML

<div class="d-flex flex-align-items-center">

  <div>
    <img id="image" src='//placehold.it/50x50/cf5'>
  </div>

  <div>
    <select id="changeImage">
      <option value="0">image 0</option>
      <option value="1">image 1</option>
      <option value="2">image 2</option>
    </select>
  </div>

</div>

CSS

.d-flex {
  display: flex
}

.flex-align-items-center{
  align-items: center
}

JavaScript

var imagesArray = [
  "//placehold.it/50x50/cf5", // represents val 0,
  "//placehold.it/50x50/f1f", // 1,
  "//placehold.it/50x50/444" // 2 ...
];

$('#changeImage').change(function() {
  $('#image')[0].src = imagesArray[this.value];
});