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

我使用了一个相当简洁的示例,用户根据单选按钮的输入隐藏部分,如下所示:

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”确实对选项起作用。还有别的办法吗?