通过选择选项更新图像的 src

Question

如何通过选择选项更改图像的 src？ img-src 是一个 php 变量，一旦选择了某些东西，我希望它从另一个 div 更改选择选项

下拉菜单

<select>
<option value="<?php echo $aColorName; ?>">Color Name</option>
<option value="<?php echo $anotherColorName; ?>">Color Name</option>
</select>

<img src="<?php echo $colorUrl.$aColorName ?>" />

我希望每次从选项中选择新颜色时更新图像源

Answer 1

由于您已经添加了 jQuery，我将向您展示一个使用事件处理程序的不显眼的代码示例。

$(function () {
  $("select").change(function () {
    $("img").attr("src", "//placehold.it/250/" + this.value + "?text=" + $(this).find("option:selected").text());
  });
});

img {display: block; margin: 15px 0;}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<select>
  <option value=""></option>
  <option value="0f0">Yellow</option>
  <option value="00f">Blue</option>
</select>

<img src="//placehold.it/250?text=Select Colour" alt="" />

您也可以使用 Pure JS 执行相同的操作，方法是向 <select> 的 onchange 事件添加事件侦听器。

在这里，我编写了一些自定义复杂代码来设置src 属性。简单来说，您可以使用以下方法将所选选项的value设置为图像的来源：

$("img").attr("src", this.value);

Answer 2

还有一个香草版本...

var selectBox = document.getElementById('selectBox');
    var theImg = document.getElementById('theImg');
    
    selectBox.addEventListener('change', function() {
        theImg.src = '/images/' + this.options[this.selectedIndex].value + '.jpg';
    }, false);

<select id="selectBox">
    <option value="blue">Blue</option>
    <option value="red">Red</option>
</select>

<img id="theImg" src="/images/<?php echo $colorUrl.$aColorName ?>.jpg" />

<!--
The 'src' attribute in image below needs to point to the default image to fix your problem. So for example if your images path is: '/images/' and in your foreach loop the value of $colorUrl.$aColorName is: 'Yellow' then the above code will output thew following when the page initially loads:

<img id="theImg" src="/images/Yellow.jpg" />
-->