html - 根据所选值显示或隐藏 div

Question

我希望根据所选选项显示一些 block 。

div {
  display: none;
}
select[value="test1"] ~ #targ1 {
  display: block;
}
select[value="test2"] ~ #targ2 {
  display: block;
}
select[value="test3"] ~ #targ3 {
  display: block;
}

Dropdown list:
<select>
  <option value="test1">Test a</option>
  <option value="test2">Test b</option>
  <option value="test3">Test c</option>
</select>

<div id="targ1">Test 1</div>
<div id="targ2">Test 2</div>
<div id="targ3">Test 3</div>

我也试过其他的选择器，比如select[selected] ~ div 或者option:focus #targ1.

我什至尝试在 select 元素上添加一个 ::after 伪元素，但是option 标签内的 div 被忽略或行为怪异。似乎 select 和 option 标签有自己的规则，我在 w3schools 上找不到。

如何仅使用 HTML 和 CSS 根据当前选择的 option 显示和隐藏 div 元素？

编辑:解决此问题的最简单方法是内联 js，但我正在寻找无 js 解决方案。

[data-value=test1] ~ #test1 {
    color: red;
}
[data-value=test2] ~ #test2 {
    color: green;
}
[data-value=test3] ~ #test3 {
    color: blue;
}

<select onchange="this.dataset.value = this.value" data-value="test1">
  <option value="test1" checked>Test a</option>
  <option value="test2">Test b</option>
  <option value="test3">Test c</option>
</select>

<div id="test1">Target 1</div>
<div id="test2">Target 2</div>
<div id="test3">Target 3</div>

Answer 1

坏消息

为了检测当前使用 CSS 选择了哪个选项，您需要将 :checked 伪类应用到 option 元素，而不是 选择元素。有关详细信息，请参阅问题“CSS :selected pseudo class similar to :checked, but for elements”。

option:checked {
  font-weight: bold;
}

<select>
  <option>Choice 1</option>
  <option>Choice 2</option>
</select>

将它与 CSS 组合器( the adjacent sibling selector + 、 the general sibling selector ~ 、 the child selector > 和 the descendent selector )结合起来效果不佳，令人沮丧。组合器可以组合以选择任何 sibling 或后代，但永远不能选择 parent 或堂兄弟...而且由于 the select element 的 HTML 规范说它允许的内容是“零个或多个 option 或 optgroup 元素”，你不能单独使用 CSS 的 select 元素的值来影响 div。

通过 JavaScript 使用下拉菜单

下面的示例监视 select 元素的更改。发生更改时，它会获取新选择的选项元素并从 data attribute 中读取该选项的目标。 (这非常方便，因为它允许您直接在 HTML 中指定过滤器目标——从而使您的模型和控制逻辑保持分离)。然后它遍历所有有效目标，并根据该目标是否在数据属性提供的列表中添加或删除 .hidden 类。

var filter = document.getElementById('filter');

filter.addEventListener('change', function() {
  var option = this.options[this.selectedIndex];
  var targets = option.dataset.targets.split(/(\s+)/);
  for (var target of document.getElementsByClassName('target')) {
    if (targets.indexOf(target.id) >= 0)
      target.classList.remove('hidden');
    else
      target.classList.add('hidden');
  }
});

.target {
  display: block;
}

.target.hidden {
  display: none;
}

<select id="filter">
  <option data-targets="">Show no targets</option>
  <option data-targets="t1">Show target 1</option>
  <option data-targets="t2">Show target 2</option>
  <option data-targets="t1 t2">Show targets 1 and 2</option>
</select>

<div class="target hidden" id="t1">Thsi is the first target.</div>
<div class="target hidden" id="t2">This is the second target.</div>

在没有 JavaScript 的情况下使用单选按钮

与下拉元素不同，单选按钮不需要嵌套在包装元素中。因此，您可以构建 HTML，使 div 元素是单选按钮的一般同级元素，并且您可以使用 :checked 类来影响它们的可见性。

.target {
  display: none;
}

#f1:checked ~ #t1 {
  display: block;
}

#f2:checked ~ #t2 {
  display: block;
}

#f3:checked ~ #t1,
#f3:checked ~ #t2 {
  display: block;
}

<input type="radio" name="filter" id="f0" checked><label for="f0">Show no targets</label><br>
<input type="radio" name="filter" id="f1"><label for="f1">Show target 1</label><br>
<input type="radio" name="filter" id="f2"><label for="f2">Show target 2</label><br>
<input type="radio" name="filter" id="f3"><label for="f3">Show targets 1 and 2</label>

<div class="target" id="t1">This is the first target.</div>
<div class="target" id="t2">This is the second target.</div>