html - 基于下拉选项使用 CSS 显示和隐藏部分

Question

我正在使用一个相当简洁的示例，其中用户根据单选按钮的输入隐藏部分，如下所列:

CSS:

div[class^="section"] {     
    display: none;
}

input.choose-a:checked ~ div.section-a,
input.choose-b:checked ~ div.section-b,
input.choose-c:checked ~ div.section-c {
    display: block;
}

HTML:

<input type="radio" class="choose-a" name="sectionselect"/>
<input type="radio" class="choose-b" name="sectionselect"/>
<input type="radio" class="choose-c" name="sectionselect"/>
<div class="section-a">Section A content</div>
<div class="section-b">Section B content</div>
<div class="section-c">Section C content</div>

但是，我想根据下拉列表当前选择的选项显示和隐藏部分。所以，很自然地，我尝试了:

CSS:

div[class^="section"] {     
    display: none;
}

option.choose-a:checked ~ div.section-a,
option.choose-b:checked ~ div.section-b,
option.choose-c:checked ~ div.section-c {
    display: block;
}

HTML:

<select>
    <option class="choose-a">option A</option>
    <option class="choose-b">option B</option>
    <option class="choose-c">option C</option>
</select>
<div class="section-a">Section A content</div>
<div class="section-b">Section B content</div>
<div class="section-c">Section C content</div>

这似乎没有用。然而this page似乎暗示':checked'确实在一个选项上起作用。还有其他方法吗？

Answer 1

那是因为 <div>不是 <option> 的 sibling ，但是<select> .在 CSS 中，没有parent 选择器。所以恐怕下拉列表是不可能的。