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>

但是，如果您真的知道所有图像都在那里，那么您可以设置最大数量的值并在客户端上循环

通过单击“选项”插入我的目录图像

1 个答案: