通过select-option更新图像的src

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

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>

Since you have added jQuery, I will show you an example of unobtrusive code using event handlers.

$(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="" />

You can also do the same thing using Pure JS, by adding an event listener to the onchange event of the <select>.

Here, I have written some custom complicated code for setting the src attribute. In simple way, you can use the following to set the value of the selected option as the image's source:

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

</div>