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

Question

I have a list as a web part like this:

And I added an Script Editor Web Part to inject JavaScript to this list:

Now in List I have a field called "Status Value".

I want to do exactly this. Depending of selected value show me an image. How can I do that in sharepoint online using Script Editor Web Part (SEWP)?

Answer 1

I checked your example, it just shows the color based on the selected value. So you can achieve this via Jquery and CSS in Script Editor Web Part at the New Form as the following

The script

<style>
#circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
</style>

<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='Color']").change(function() {   document.getElementById("circle").style.backgroundColor=$("select[title='Color']").val();
});
});
</script>
<div id="circle"></div>

---

[OutPut]

Answer 2

I answered something similar to this a while back. You can use calculated fields to get your desired results. Place your images into a local library and call them from there. See if this will get you on the right path.