change image source based on list/menu

Hi Experts

Is it possible to change the source of an image based on what is chosen in a list menu? below is a snippet of code showing an image with an ID that needs it's source changed depending one if 1,2 or 3 is chosen in the list/menu.

Thanks for you time
<img src="images/getNameFromWhatIsSelectedInDropMenu.png" width="340" height="187" id="price-rise-overlay">
    <p>
        <label for="tfa_selectacolour">list1</label>
        <br>
        <select name="colourList" class="calc-colour" id="tfa_selectacolour">
            <option value="10" id="grey">item1</option>
            <option value="11" id="green">item3</option>
            <option value="12" id="cream">item2</option>
        </select>
    </p>

Open in new window

hnEEAsked:
Who is Participating?
 
Tomarse111Connect With a Mentor Commented:
Try the code below:
<script type="text/javascript">
	function changeImg(val){
		if(val==10){document.getElementById('price-rise-overlay').src="/image/1.jpg"};
		if(val==11){document.getElementById('price-rise-overlay').src="/image/2.jpg"};
		if(val==12){document.getElementById('price-rise-overlay').src="/image/3.jpg"};			
	
	}
</script>
 
 
<img src="/assets/images/404.gif" width="340" height="187" id="price-rise-overlay">
    <p>
        <label for="tfa_selectacolour">list1</label>
        <br>
        <select name="colourList" class="calc-colour" id="tfa_selectacolour" onchange="changeImg(this.value)">
            <option  value="10" id="grey">item1</option>
            <option  value="11" id="green">item3</option>
            <option  value="12" id="cream">item2</option>
        </select>
    </p>

Open in new window

0
 
David H.H.LeeCommented:
Hi hnEE,
Try this:

<form>
<img src="images/getNameFromWhatIsSelectedInDropMenu.png" width="340" height="187" id="price-rise-overlay">
    <p>
        <label for="tfa_selectacolour">list1</label>
        <br>
        <select name="colourList" class="calc-colour" id="tfa_selectacolour" onchange="javascript:changeopt(this);">
            <option value="0" id="1st">-- Select --</option>
            <option value="10" id="grey">item1</option>
            <option value="11" id="green">item3</option>
            <option value="12" id="cream">item2</option>
        </select>
    </p>
</form>
<script>
function changeopt(obj){
 
 var objImg=document.getElementById('price-rise-overlay');

 switch(parseInt(obj.value)){
   case 10:objImg.src='images/item1.png';break;
   case 11:objImg.src='images/item3.png';break;
   case 12:objImg.src='images/item2.png';break;
   default:objImg.src='images/getNameFromWhatIsSelectedInDropMenu.png';break;
 }
}
</script>
0
 
hnEEAuthor Commented:
Awesome! Thank you so much.
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
David H.H.LeeCommented:
Oopps, too late...
0
 
hnEEAuthor Commented:
Hi Tomarse111

I know you have answered this questions already... but is it possible to target the id of the select menu item?

I changed onchange="changeImg(this.value)" to onchange="changeImg(this.id)" but it didn't seem to work.

Thanks for your time.
0
 
Tomarse111Commented:
Not quite sure what you mean sorry. Why would you want to target the ID of each option? What are you trying to do?
0
 
hnEEAuthor Commented:
this is actually on a dynamic site. the id of the select option will only come from a pool of 3 options - but the value (at the moment) comes from a pool of 16.

Just trying to write less code, and code for the future, and have values inserted into the script dynamically
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.