JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<select id="pilihWarna" name="fgdfd" style="background:none;">
                  <option>satu</option>
                  <option>dua</option>
                  <option>tiga</option>
                  <option>empat</option>
                </select>    
    
    <div class="something">
                <div class="bigandsmall">
                <p>satu</p><img src="image/Chrysanthemum.jpg" width="50px" /></div>
                    
                <div class="bigandsmall">
                <p>dua</p><img src="image/Desert.jpg"  width="50px"/></div>
                    
                <div class="bigandsmall">
                <p>tiga</p><img src="image/Hydrangeas.jpg"  width="50px"/></div>
                    
                <div class="bigandsmall">
                <p>empat</p><img src="image/Jellyfish.jpg"  width="50px"/></div>

        </div>

CSS

.something .bigandsmall:first-child{display:block;}
.bigandsmall{display:none;}

JavaScript

var currentDiv = 0;
            $(document).ready(function(){
                $("#pilihWarna option").click(function(){
                    $(".bigandsmall").eq($(this).index()).css( "display", "block" );
                    
                    if($(this).index()!=currentDiv)
                    {$(".bigandsmall").eq(currentDiv).css("display","none");}
                    currentDiv=$(this).index();
                    
                })
            });