JSFiddle - React, Tailwind, and code Playground

HTML

<select id="test" name="test" class="js-show-categories">
   <option value="1">ЧЕЛЯБИНСК</option>
   <option value="2">САРАТОВ</option>
</select>

<div class="categories">
  <div class="category-card js-category-hide" data-cat-id="1">1</div>
  <div class="category-card js-category-hide" data-cat-id="2">2</div>
  <div class="category-card js-category-hide" data-cat-id="1">1</div>
  <div class="category-card js-category-hide" data-cat-id="1">1</div>
  <div class="category-card js-category-hide" data-cat-id="2">2</div>  
</div>

CSS

.categories {
  display: flex;
  flex-direction:row;
}
.category-card {
  background-color:#ccc;
  height: 50px;
  width: 50px;
  margin:5px;
}
.category-card_shown {
  display: block;
}
.category-card_hidden {
  display: none;
}

JavaScript

$('.js-show-categories').on('change',function() {
	var value = $(this).val();
  console.log(value);
  $(`.js-category-hide`).addClass('category-card_hidden');
  $(`.js-category-hide[data-cat-id="${value}"]`).addClass('category-card_shown').removeClass('category-card_hidden');  
});