javascript - 通过 select-option 更新图像的 src

Question

如何通过 select-option 更改图像的 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

还有普通版本...

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" />
-->