通过select-option更新图像的src

Question

How can i change the src of an image through select-option? The img-src is a php variable and once something is selected I wanted it to change a select-option from another div

The dropdown

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

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

I wanted the image source to update each time a new color is selected from the options

Answer 1

And a vanilla version...

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

</div>