Is it possible to use combinators with select > option elements? [duplicate] - html

Question

This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 1 year ago.
I want to make the text input appear/disappear using select dropdown menu. When the option with value '4' is selected, the text input below should display:block. The code is as follows:
HTML
<div class="parent">
<label for="title">Movie</label>
<select name="title" id="title">
<option value="1" selected>Robocop</option>
<option value="2">Terminator</option>
<option value="3">The Professional</option>
<option value="4">Home Alone</option>
<option value="5">Back to the Future</option>
<option value="6">Forrest Gump</option>
<option value="7">The Notebook</option>
<option value="8">The Good, The Bad, and The Ugly</option>
<option value="9">The Mask</option>
</select>
<input class="test" type="text">
</div>
CSS
.test {
display: none;
}
.parent option[value="4"]:checked ~ .parent > input.test {
display: block;
}
Is it possible or I have been barking under the wrong tree for hours? At the moment JS is not an option. Thanks!

Answer 1

I guess it's not possible without JS at all, but you can achieve your goal with simple Element dataset onchange trick:
select ~ input {
display: none;
}
select[data-chosen='4'] ~ input {
display: inline-block;
}
<div class="parent">
<label for="title">Movie</label>
<select name="title" id="title" onchange="this.dataset.chosen = this.value">
<option value="1" selected>Robocop</option>
<option value="2">Terminator</option>
<option value="3">The Professional</option>
<option value="4">Home Alone</option>
<option value="5">Back to the Future</option>
<option value="6">Forrest Gump</option>
<option value="7">The Notebook</option>
<option value="8">The Good, The Bad, and The Ugly</option>
<option value="9">The Mask</option>
</select>
<input class="test" type="text">
</div>