JSFiddle - React, Tailwind, and code Playground
by Qwerty_Wasd
HTML
<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 class="none" value="1" title="https://i.ibb.co/ZgcQ4kf/image.png">Бесцветный</option>
<option class="none" value="2" title="https://i.ibb.co/R9p9NL3/image.png">Белый</option>
<option class="none" value="3" title="https://i.ibb.co/QbXRwKw/image.png">Груша</option>
<option class="none" value="4" title="https://i.ibb.co/SwRr43n/image.png">Дуб</option>
<option class="none" value="5" title="https://i.ibb.co/fd9HLzM/image.png">Зеленый</option>
<option class="none" value="6" title="https://i.ibb.co/CmbLrk9/image.png">Калужница</option>
<option class="none" value="7" title="https://i.ibb.co/2yCXkQG/image.png">Каштан</option>
<option class="none" value="8" title="https://i.ibb.co/f4Cd07n/image.png">Красный</option>
<option class="none" value="9" title="https://i.ibb.co/SdVWzTD/image.png">Орегон</option>
<option class="none" value="10" title="https://i.ibb.co/yqgK53P/image.png">Орех</option>
<option class="none" value="11"...
CSS
.none {
display: none;
}
JavaScript
document.getElementsByClassName(`t-product__option-select`)[0].addEventListener(`input`, e => {
[...document.getElementsByClassName(`t-product__option-select`)[1].options].forEach((o, i, a) => {
if (i > 0) {
o.classList.add(`none`);
a[e.currentTarget.selectedIndex === 0 ? 0 :
e.currentTarget.selectedIndex === 2 ? 1 :
e.currentTarget.selectedIndex === 3 ? 1 : i].classList.remove(`none`);
}
});
});