JSFiddle - React, Tailwind, and code Playground

HTML

<select id="sel">
  <option value="-1">Catégorie</option>
  <option value="jour">Jour</option>
  <option value="couleur">Couleur</option>
  <option value="fruit">Fruit</option>
</select>
<div class="article" data-categorie="couleur">
 Jaune
</div>
<div class="article"  data-categorie="jour">
 Mardi
</div>
<div class="article"  data-categorie="fruit">
 Kiwi
</div>
<div class="article" data-categorie="couleur">
 Rouge
</div>
<div class="article" data-categorie="jour">
 Lundi
</div>
<div class="article" data-categorie="fruit">
 Banane
</div>
<div class="article" data-categorie="couleur">
 Bleu
</div>
<div class="article" data-categorie="jour">
 Vendredi
</div>
<div class="article" data-categorie="fruit">
 Pomme
</div>

JavaScript

$("#sel").on('change', function(){
  sel=$(this).val();
  if (sel!=-1){
  $('.article').hide()
	console.log(sel);
  $("[data-categorie='"+sel+"']").each( function(){ $(this).show(); });
  }
  else {
  $('.article').show();
  }
  });