Display image on drop down selection change newitem form

Question

I'm building a list where I want to show an image of the selected item as it's selected in the drop down in the new item form, I have very little javascript knowledge. I'm using the following script

<img id="my_image" src="/mysites/site/AL-03T.PNG" alt="" style="width: 48px; 
height: 48px;"/><script src="http://code.jquery.com/jquery-1.7.2.min.js" 
type="text/javascript"></script><script type="text/javascript">
$(document).ready(function(){
$("select[title='Product']").change(function() {   document.getElementById("my_image").attr('src',"/mysites/site/" + (select[title='Product']).val() + '.PNG'");
});
});
</script> 
<img id="my_image" alt=""/>

based on this answer

Load image depending of selected value of dropdown list - SharePoint Online

can someone help?

Answer 1

There are a few things wrong here

• First ID's need to be unique in your HTML

• Second, you are mixing javascript with jQuery and you can do that but there are more simple ways to accomplish what you want. Take a look at this fiddle and see if you get what you need from it. You do still need to load jquery on the page, and also you can wrap the jQuery in a

  $(document).ready(function(){
  
  .... ALL YOUR CODE HERE.
  
  })
  

If you need some further explination let me know. Hope this helps

https://jsfiddle.net/kcode28/mtua4L7c/21/

Answer 2

Change your script as following:

<img id="my_image" src="/mysites/site/AL-03T.PNG" alt="" style="width: 48px; height: 48px;"/>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function(){
   $("select[title='selection']").change(function(){
     $("img[id=my_image]").attr("src","/mysites/site/" + $(this).val() + ".PNG");
   });
});
</script>