Как изменить изображение при выборе варианта, если у нас есть ассоциативный массив javascript

Question

Как изменить изображение при выборе варианта, если у нас есть ассоциативный массив javascript of variant_id и variant_img_sr c?

html Код: -

<select name="id" >
{% for variant in product.variants %}
{% if variant.available %}
  <option value="{{ variant.id }}">  {{ variant.title }} - {{ variant.price | money }}</option>
{% else %}
{% endfor %}

Javascipt-код: -

var images = [];
{% for variant in product.variants %}
 {% for image in product.images %}
 
     images[ {{ variant.id }}]  = "{{ variant.image.src | product_img_url: 'medium' }}";
 {% endfor %}
{% endfor %}

Answer 1

Вот так

const images = {
  "default": document.getElementById("img").src,
  "variant2": "http://lorempixel.com/400/200/sports/2/",
  "variant3": "http://lorempixel.com/400/200/sports/3/"
};
document.getElementById("variants").addEventListener("change", function() {
  document.getElementById("img").src = images[this.value];
})

<select id="variants">
  <option value="default">Please select</option>
  <option value="variant2">Variant 2</option>
  <option value="variant3">Variant 3</option>
</select><hr/>
<img src="http://lorempixel.com/400/200/sports/1/" id="img" />