JSFiddle - React, Tailwind, and code Playground

by Ahmet Çetintaş

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select name="bt" id="clct" class="clct input--style-1" data-placeholder="All Types" multiple>
<option value="1">Gulets &amp; Motor Sailer</option>
      <option value="2">Sailing Boats</option>
      <option value="3">Catamaran</option>
      <option value="4">Motor Yachts &amp; Boats</option>
</select>

<select name="yc" id="cyc" data-placeholder="All Categories" multiple>
    <option  value="1" data-tag="1">Budget Gulets</option>
    <option  value="2" data-tag="1">Standart Gulets</option>
    <option  value="3" data-tag="1">Luxury Gulets</option>
    <option  value="4" data-tag="1">Deluxe Gulets</option>
    <option  value="5" data-tag="1">Superb Gulets &amp; Motor Sailer</option>
    <option  value="0" data-tag="2">Sailing Boats</option>
    <option  value="0" data-tag="3">Catamaran</option>
    <option  value="0" data-tag="4">Motor Yachts &amp; Boats</option>
</select>

JavaScript

$("#clct, #cyc").select2({
    //maximumSelectionLength: 1,
});


// Select step by step for homepage
$('#clct').on('change', function() {
  var selected = $(this).val();
  $("#cyc option").each(function(item){
    console.log(selected) ;  
    var element =  $(this) ; 
    console.log(element.data("tag")) ; 
    if (element.data("tag") != selected){
      element.hide() ; 
    }else{
      element.show();
    }
  }) ; 
  
  $("#cyc").val($("#cyc option:visible:first").val());
  
});