html - 从选择下拉列表中制作标签

Question

我想从下拉选项选择中创建选项卡，例如，每当我选择第一个选项时，ul 元素和 data-name="test" 应该呈现- 这是否只能通过 css 以任何方式实现？默认情况下应该选择第一个

<select>
<option data-value="test" value="test">Test</option>
<option data-value="test1" value="tes1t">Test</option>

</select>


<ul data-name="test">
    <li>Item</li>
</ul>

<ul data-name="test1">
    <li>Item</li>
</ul>

Answer 1

如果您需要纯 CSS 解决方案，您可以使用 CSS 伪元素 :valid 和 :invalid。但在这种情况下，您只有两种选择。示例如下:

ul {
  display: none;
}

select:invalid ~ ul[data-name="test1"],
select:valid ~ ul[data-name="test2"] {
  display: block;
}

<select required>
  <option value="">Test</option>
  <option value="visible">Test2</option>
</select>

<ul data-name="test1">
  <li>Item 1</li>
</ul>

<ul data-name="test2">
  <li>Item 2</li>
</ul>

但是，最好用 JavaScript 来实现它，因为您有一个更灵活和更易于理解的解决方案。示例如下:

const checkElement = (id) => {
  document
    .querySelectorAll("ul")
    .forEach((el) => (el.hidden = el.dataset["name"] !== id));
};

document
  .querySelector("select")
  .addEventListener("change", (ev) => checkElement(ev.target.value));

checkElement("test1"); // set default element id

<select>
  <option value="test1">Test1</option>
  <option value="test2">Test2</option>
</select>

<ul data-name="test1" hidden>
  <li>Item 1</li>
</ul>

<ul data-name="test2" hidden>
  <li>Item 2</li>
</ul>

我希望这些简单的例子能以某种方式帮助到你。