通过单击 "option" 插入我的目录图像

Question

我想通过单击 <option> 元素之一将图像插入 <img>，例如，我有一个包含多个图像的目录，我想拉取特定图像根据 <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>

但是如果你真的知道你的图像都在那里，那么你可以只设置最大数字的值并在客户端循环

通过单击 "option" 插入我的目录图像

Insert my directory image by clicking on an "option"

html

php

html-select