根据下拉选项显示和隐藏带有 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> 的兄弟姐妹，而是 <select>。而在 CSS 中，没有 parent 选择器。所以恐怕下拉列表是不可能的。

根据下拉选项显示和隐藏带有 CSS 的部分

Showing and hiding sections with CSS based on a drop-down option

html

css

html-select

hide