JSFiddle - React, Tailwind, and code Playground

by thomas_david88

HTML

<select id="ddlViewBy">
  <option value="1">all</option>
  <option value="1">image</option>
  <option value="2" >video</option>
  <option value="3">pdf</option>
</select>
<div class="full-image" data-id="2"  data-image="jpg">1<img src=""/>
</div>
<div class="full-image" data-id="3"  data-image="png">2<img src=""/>
</div>
<div class="full-image" data-id="4"  data-image="jpg">3<img src=""/>
</div>
<div class="full-image" data-id="5"  data-image="mp4">video 1<img src=""/>
</div>
<div class="full-image" data-id="5"  data-image="mp4">video 2<img src=""/>
</div>
<div class="full-image" data-id="6"  data-image="gif">5<img src=""/>
</div>
<div class="full-image" data-id="7"  data-image="pdf">pdf<img src=""/>
</div>

CSS

.show{
  display:block;
}
.hidden{
  display:none;
}

JavaScript

const ext = ["jpg", "gif", "png","jpeg"];
const extvideo=["mp4","ogv"];
const extpdf=["pdf"];
$( "#ddlViewBy").on("change", function(e) { 
var name=$( "#ddlViewBy option:selected" ).text();
console.log(name);
if(name=="image"){
      document.querySelectorAll('.full-image').forEach(div => {
                const className= ext.includes(div.dataset['image']) ? "show" : "hidden";
                div.classList.add(className);
            });
}
if(name=="video"){
      document.querySelectorAll('.full-image').forEach(div => {
                const className= extvideo.includes(div.dataset['image']) ? "show" : "hidden";
                div.classList.add(className);
            });
}
if(name=="pdf"){
      document.querySelectorAll('.full-image').forEach(div => {
                const className= extpdf.includes(div.dataset['image']) ? "show" : "hidden";
                div.classList.add(className);
            });
}
});