JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<link rel="stylesheet" href="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/css/msdropdown/dd.css">
<script src="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/js/msdropdown/jquery.dd.min.js"></script>
<div class="t-product__option js-product-option newselect">
  <div class="t-product__option-title t-descr t-descr_xxs js-product-option-name">Вид покрытия:</div>
    <div class="t-product__option-variants">
      <select class="t-product__option-select t-descr t-descr_xxs js-product-option-variants">
         <option value="Без покрытия" data-product-variant-price="0">Без покрытия</option>
         <option value="Морилка" data-product-variant-price="0.2">Морилка</option>
         <option value="Лак" data-product-variant-price="0.4">Лак</option>
         <option value="Акрил" data-product-variant-price="0.5">Акрил</option>
      </select>
  </div>
  <div class="t-product__option-title t-descr t-descr_xxs js-product-option-name">Цвет:</div>
    <div class="t-product__option-variants">
      <select class="t-product__option-select t-descr t-descr_xxs js-product-option-variants">
         <option value="0" title="">---</option>
         <option value="1" title="https://i.ibb.co/ZgcQ4kf/image.png">Бесцветный</option>
         <option value="2" title="https://i.ibb.co/R9p9NL3/image.png">Белый</option>
         <option value="3" title="https://i.ibb.co/QbXRwKw/image.png">Груша</option>
         <option value="4" title="https://i.ibb.co/SwRr43n/image.png">Дуб</option>
         <option value="5" title="https://i.ibb.co/fd9HLzM/image.png">Зеленый</option>
         <option value="6" title="https://i.ibb.co/CmbLrk9/image.png">Калужница</option>
         <option value="7" title="https://i.ibb.co/2yCXkQG/image.png">Каштан</option>
         <option value="8" title="https://i.ibb.co/f4Cd07n/image.png">Красный</option>
         <option value="9" title="https://i.ibb.co/SdVWzTD/image.png">Орегон</option>
         <option value="10"...

CSS

.t-product__option-select {
  height: 100px;
  width: 150px;
  display: inline-block;
  border-radius: 5px;
  color: #615050 !important;
  border: #f5f1e8 !important;
  background: #f5f1e8 !important;
}

.t-product__option-variants::after {
  border-color: #615050 transparent transparent transparent;
}

.t-product__option-variants img {
  height: 20px;
  width: 20px;
  display: inline-block;
}

.none {
  display: none!important;
}

JavaScript

$("body select").msDropDown();
$('#msdrpdd21_child li:not(:first-child)').addClass('none');
let opObserveMut = {
  target: document.getElementById('msdrpdd20_title'),
};
opObserveMut.mutListener = mutations => mutations.forEach(e => {
  if (e.type === 'childList') {
    $('#msdrpdd21_child li:not(:first-child)').addClass('none');
    $('#msdrpdd21_child li').each(function(i) {
      if (i === (opObserveMut.target.textContent ===  `Без покрытия` ? 0 :
                 opObserveMut.target.textContent ===  `Лак` ? 1 :
                 opObserveMut.target.textContent ===  `Акрил` ? 2 : i)) {
        $(this).removeClass('none');
      }	
    });
    $('#msdrpdd20_title span:first-child').text("---);
  }
});
opObserveMut.observer = new MutationObserver(opObserveMut.mutListener);
opObserveMut.observer.observe(opObserveMut.target, {
  childList: true,
  characterData: true,
  subtree: true
});