JSFiddle - React, Tailwind, and code Playground

HTML

<select id="selected">
 <option value="0">Select</option>
 <option value="a">Images text1</option>
 <option value="b">Images text2</option>
 <option value="c">Images text3</option>
 <option value="d">Images text4</option>
 </select>

<div id="colors">
   <div id="a">
    <img src="http://www.acura.com/images/HomepageSlideshow/home_bg_mdx.jpg" height="200px" width="400px"/>
    </div>
    <div id="b">
    <img src="http://www.acura.com/images/HomepageSlideshow/home_bg_tlx.jpg" height="200px" width="400px" />
    </div>
    <div id="c">
    <img src="http://www.acura.com/images/HomepageSlideshow/home_bg_rlx.jpg" height="200px" width="400px"/>
    </div>
    <div id="d">
    <img src="http://www.acura.com/images/HomepageSlideshow/home_bg_ilx.jpg" height="200px" width="400px"/>
    </div>
</div>

CSS

#a
        {
            background-color: red;
            height: 200px;
            width: 400px;
        }
        #b
        {
            background-color: green;
            height: 200px;
            width: 400px;
        }
       #c
        {
            background-color: blue;
            height: 200px;
            width: 400px;
        }
       #d
        {
            background-color: darkviolet;
            height: 200px;
            width: 400px;
        }
        #colors div
        {
            display: none;
        }

JavaScript

$(document).ready(function(){
            $("#selected").change(function(){
                $('#colors div').hide();
                debugger;
                $('#'+$(this).val()).show();
                console.log('#'+$(this));
            });
        });