Теоретически вы должны быть в состоянии сделать это с чистым CSS с чем-то вроде:
#second option { display: none; }
#first:has(> option#a:checked) ~ #second option.a { display: block; }
#first:has(> option#b:checked) ~ #second option.b { display: block; }
#first:has(> option#c:checked) ~ #second option.c { display: block; }
<select id="first">
<option id="a">a</option>
<option id="b">b</option>
<option id="c">c</option>
</select>
<select id="second">
<option class="a b c">Shown for all options</option>
<option class="a">Shown when a selected</option>
<option class="c">Shown when c selected</option>
</select>
Однако пока ничего не поддерживает :has(). С изменением реализации вы можете сделать нечто подобное в чистом CSS. Хотя гораздо лучше go маршрут JavaScript; как следующее имеет ряд предостережений:
label:after { content: ''; display: block; }
input[name=second] { display: none; }
input[name=second] + label { display: none; }
#a:checked ~ input[name=second].a { display: inline; }
#a:checked ~ input[name=second].a + label { display: inline; }
#b:checked ~ input[name=second].b { display: inline; }
#b:checked ~ input[name=second].b + label { display: inline; }
#c:checked ~ input[name=second].c { display: inline; }
#c:checked ~ input[name=second].c + label { display: inline; }
<h4>First</h4>
<input id="a" type="radio" name="first" /><label>A</label>
<input id="b" type="radio" name="first" /><label>B</label>
<input id="c" type="radio" name="first" /><label>C</label>
<h4>Second</h4>
<input id="d" type="radio" name="second" class="a b c" /><label>Shown for all options</label>
<input id="e" type="radio" name="second" class="a" /><label>Shown when a is selected</label>
<input id="f" type="radio" name="second" class="c" /><label>Shown when c is selected</label>
Основная проблема с вышесказанным заключается в том, что для того, чтобы полагаться на селектор ~, все входы должны быть родственный. Так что это сильно влияет на ваш макет, и то, что вы действительно можете достичь. Как только :has() будет поддерживаться, станут доступны чистые CSS опции, но даже тогда вы, как правило, хотите больше логической обработки, чем может предложить CSS, то есть, как вы разрешаете пользователю выходить и возвращаться к той же точке в форме? Или что происходит со значением выбранного параметра, когда он исчезает? Именно здесь JavaScript определенно победит.
Формы являются прекрасным примером того, как создание пользовательского интерфейса (пользовательского интерфейса) на основе дерева состояний является хорошей идеей. Это, как правило, в центре внимания фреймворков, таких как React или Vue. Где, в зависимости от текущего «состояния» (дерева объектов, которое описывает выбранные параметры), пользовательский интерфейс просто «реагирует» и скрывает / показывает условные элементы. Прочитать об этом с чисто «государственной» точки зрения, может быть хорошей идеей рассмотреть Redux или аналогичные технологии в качестве основы того, что вы создаете.