JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div id="cat">
<a href="#" data-id="1">1</a>
<a href="#" data-id="2">2</a>
<a href="#" data-id="3">3</a>
</div>


<select id="type" name="type">
<option value="0">type</option>
<option value="a" data-categories="1 2 3">1 2 3</option>
<option value="b" data-categories="1 3">1 3</option>
<option value="c" data-categories="2">2 3</option>
<option value="d" data-categories="1 2">1 2</option>
<option value="e" data-categories="2">2</option>
</select>

JavaScript

$(function() {
  function ontypeChange(e) {
  e.preventDefault();
    var selectedType = $(this).data("id");
    $("#type").val("0");
    $("#type option")
      .prop("hidden", false)
      .not("[data-categories~='" + selectedType + "']")
      .prop("hidden", true);
  }
  $("#cat a").on("click", ontypeChange);
});