JSFiddle - React, Tailwind, and code Playground

by anoopsuda

HTML

<select id="mySelect" onchange="mySelectfunction()" class="form-control">
                    <option value="">Select</option>
                    <option value="img1">img1</option>
                    <option value="img2">img2</option>
                    <option value="img3">img3</option>
                    <option value="all">all</option>
                </select>

<div class="row">
            <div class="col-sm-4 col-md-4 col-xs-12" id="img1" style="display:none;"><img src="https://www.w3schools.com/html/pulpitrock.jpg" class="resposnsiveImg" /></div>
            <div class="col-sm-4 col-md-4 col-xs-12" id="img2" style="display:none;"><img src="https://www.w3schools.com/html/img_girl.jpg" class="resposnsiveImg" /></div>
            <div class="col-sm-4 col-md-4 col-xs-12" id="img3" style="display:none;"><img src="https://www.w3schools.com/html/img_chania.jpg" class="resposnsiveImg" /></div>
        </div>

JavaScript

function mySelectfunction(){
                        getValue = document.getElementById("mySelect").value;
                        if(getValue == "img1"){
                            document.getElementById("img1").style.display = "block";
                            document.getElementById("img2").style.display = "none";
                            document.getElementById("img3").style.display = "none";
                        }
                        if(getValue == "img2"){
                            document.getElementById("img1").style.display = "none";
                            document.getElementById("img2").style.display = "block";
                            document.getElementById("img3").style.display = "none";
                        }
                        if(getValue == "img3"){
                            document.getElementById("img1").style.display = "none";
                            document.getElementById("img2").style.display = "none";
                            document.getElementById("img3").style.display = "block";
                        }
                        if(getValue == "all"){
                            document.getElementById("img1").style.display = "block";
                            document.getElementById("img2").style.display = "block";
                            document.getElementById("img3").style.display = "block";
                        }
                    }