JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

HTML

<select id="selected">    
   <option value="0">image1 text</option>
   <option value="1">image2 text</option>
   <option value="2">image3 text</option>
   <option value="4">image4 text</option>
 </select>

<div id="images">
    <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(){
                $('#images div').hide();
                $('#'+$(this).val()).show();
            });
        });