0

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?

0

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/

  • Hi, I tried this but I can't get the image to change when I change the drop down selection, this is sharepoint list, the images are stored in a library, the file names match the list choices, can you help me figure this out? – Diego Aug 7 '19 at 15:18
  • I am using a select drop down with title of product to emulate your sharepoint list drop down. You need to make sure that the $("#my_image").attr('src','picsum.photos/id' + imgLocation + '/200/300'); Line of code is actually pointing to your images on your sharepoint.... In the code sample the image urls are picsum.photos/id/493/200/300 and picsum.photos/id/976/200/300 When you change the drop down the 493 and 976 are swapped out and the image shows up.... This should get you to where you need, If not change your code and reply and I can take a look – SP-Kyle Aug 7 '19 at 17:12
  • Hi Kyle, I got it to work, thank you so much! One more thing, is it possible to make the script work when loading, the reason I want that is that in addition to adding items manually , I have a page with some images that when clicked on redirect to this list with a pre selection on the "Product" field, how can I make it so that this script also works with that? – Diego Aug 9 '19 at 17:26
  • Diego, you may need to be a little more specific on what you mean. I am a little confused by your request. Perhaps ask this in a different way – SP-Kyle Aug 9 '19 at 21:04
  • 1
    Kyle, once again thank you very much, this worked perfectly, you rock! – Diego Aug 13 '19 at 6:02
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.