Вставьте мое изображение в каталог, нажав на «вариант»

Question

Я хочу вставить изображение в <img>, щелкнув по одному из элементов <option>, например, у меня есть каталог с несколькими изображениями, и я хочу получить определенное изображение в соответствии с <option>ID.

Когда я нажимаю на одну из опций в выпадающем списке, мне нужно вставить изображение в элемент <img>

Вот код

<select>                        
<?php
    for($i = 0; $i <= 10; $i++){                            
        print('<option id="img'.$i.'">image'.$i.'</option>');
    }
?>                      
</select>

<img src="#"></img>

Как видите, я загружаю 10 элементов, но я хочу щелкнуть по одному из элементов, чтобы открыть изображение в соответствии с именем в моем каталоге.

Имя изображения вмой каталог следует этому шаблону "img" плюс число перед ним.

Как я могу это сделать?

Answer 1

Вы имеете в виду это

<select> 
  <option value="">Please select</option>                       
<?php
for($i = 0; $i <= 10; $i++){ ?>                           
  <option value="img<?= $i ?>">image<?= $i ?></option>
 <?php } ?>                      
</select>
<img src="" id="img1"/>
<script>
document.querySelector("select").addEventListener("change",function() { 
  var val = this.value;
  if (val) document.getElementById("img1").src=val+".jpg";
})
</script>

Однако, если вы действительно знаете, что все ваши изображения там, тогда вы можете просто установить значение наибольшего числа и цикл на клиенте вместо