One possible way to achieve this using only CSS could be:
#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>
Currently, the `:has()` selector is not widely supported across browsers. Alternatively, you can try a workaround in pure CSS or opt for JavaScript which offers more flexibility. However, there are some limitations to consider with the CSS approach:
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>
The main drawback of using the sibling combinator ``~` in this context is that all inputs need to be siblings, impacting layout and functionality. While CSS-only solutions may improve once `:has()` is universally supported, JavaScript remains a more reliable choice for complex form interactions. Forms often benefit from a state-based UI design pattern seen in frameworks like React and Vue, where elements dynamically update based on the user's actions. Considering technologies like Redux for managing state could enhance your interactive form development.