<select name="sel1">
  <option data-child="" value="" disabled selected>Выберите значение</option>
  <option data-child="1" value="1">Вариант 1</option>
  <option data-child="2" value="2">Вариант 2</option>
  <option data-child="3" value="3">Вариант 3</option>
</select>
<select name="sel2">
  <option data-when="*" value="" disabled selected>Выберите значение</option>
  <option data-when="1" value="a1">Вариант 1.1</option>
  <option data-when="1" value="a2">Вариант 1.2</option>
  <option data-when="2" value="b1">Вариант 2.1</option>
  <option data-when="2" value="b2">Вариант 2.2</option>
  <option data-when="3" value="c1">Вариант 3.1</option>
  <option data-when="3" value="c2">Вариант 3.2</option>
  <option data-when="1,2" value="ab3">Вариант (1,2).3</option>
  <option data-when="*" value="abc4">Вариант *.4</option>
</select>
  

.hidden {
  display: none;
}

function changeSelect (parent, child) {
  const val = parent.querySelector('option:checked').dataset.child;
  child.querySelectorAll('option').forEach(
    (opt) => opt.classList.toggle(
      'hidden',
      opt.dataset.when !== '*'
        && !opt.dataset.when.split(',').includes(val),
    ),
  );
  child.value = '';
}

const sel1 = document.querySelector('[name="sel1"]');
const sel2 = document.querySelector('[name="sel2"]');

sel1.value = '';
changeSelect(sel1, sel2);

sel1.addEventListener(
  'change',
  () => changeSelect(sel1, sel2),
);