Is it possible to use combinators with select > option elements?

Question

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!

You are not selecting the parent element, since `~` is just the general sibling combinator. — Reza Saadati, Dec 31 '21 at 10:32

score 0 · Answer 1 · answered Dec 31 '21 at 10:13

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>

Is it possible to use combinators with select > option elements?

1 Answers1