JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

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"></div>
    <div id="b"></div>
    <div id="c"></div>
    <div id="d"></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();
                $('#'+$(this).val()).show();
            });
        });