我想從下拉選項選擇中創建選項卡，例如，每當我選擇第一個選項時，應該呈現的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>uj5u.com熱心網友回復：
如果您需要僅使用 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>我希望這些簡單的例子能以某種方式幫助你。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/398103.html