主页 / coding / 问题 / 79527728
Accepted
Pragmateek
Asked: 2025-03-23 00:23:39 +0800 CST

使用选择切换可折叠元素的可见性

  • 772

有没有办法用select's来切换元素的可见性options？

我尝试放置data-bs-toggle/data-bs-target属性：

  • 直接在option，
  • 在内部a，
  • 在 内部button.

都不起作用。

最接近有效的方法是使用 Bootstrap 下拉菜单。

PS：最终目的是实现父子依赖select：你在父级中选择一个值select，相应的子级select就会变得可见。

<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <select>
            <option data-bs-toggle="collapse" data-bs-target="#content1">#1</option>
            <option data-bs-toggle="collapse" data-bs-target="#content2">#2</option>
            <option data-bs-toggle="collapse" data-bs-target="#content3">#3</option>
        </select>

        <select>
            <option><a data-bs-toggle="collapse" data-bs-target="#content1" href="#">#1</a></option>
            <option><a data-bs-toggle="collapse" data-bs-target="#content2" href="#">#2</a></option>
            <option><a data-bs-toggle="collapse" data-bs-target="#content3" href="#">#3</a></option>
        </select>

        <select>
            <option><button type="button" data-bs-toggle="collapse" data-bs-target="#content1">#1</button></option>
            <option><button type="button" data-bs-toggle="collapse" data-bs-target="#content2">#2</button></option>
            <option><button type="button" data-bs-toggle="collapse" data-bs-target="#content3">#3</button></option>
        </select>

        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">#</button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" data-bs-toggle="collapse" data-bs-target="#content1" href="#">#1</a></li>
                <li><a class="dropdown-item" data-bs-toggle="collapse" data-bs-target="#content2" href="#">#2</a></li>
                <li><a class="dropdown-item" data-bs-toggle="collapse" data-bs-target="#content3" href="#">#3</a></li>
            </ul>
        </div>

        <div id="container">
            <span id="content1" class="collapse show" data-bs-parent="#container">#1</span>
            <span id="content2" class="collapse" data-bs-parent="#container">#2</span>
            <span id="content3" class="collapse" data-bs-parent="#container">#3</span>
        </div>
    </body>
</html>

html

1 个回答

  1. Best Answer

    您可以使用:has()伪类根据选项显示元素:checked：

    #container span {
  display: none;
}

.select:has(option:nth-child(1):checked) + #container #content1 {
  display: block;
}

.select:has(option:nth-child(2):checked) + #container #content2 {
  display: block;
}

.select:has(option:nth-child(3):checked) + #container #content3 {
  display: block;
}
    <select class="select">
  <option>#1</option>
  <option>#2</option>
  <option>#3</option>
</select>

<div id="container">
  <span id="content1">#1</span>
  <span id="content2">#2</span>
  <span id="content3">#3</span>
</div>

    • 2

相关问题