html css twitter-bootstrap bootstrap-4 bootstrap-5

Toggle collapsible element visibility with select

Is there a way to toggle the visibility of elements with a select's options?

I've tried to put the data-bs-toggle/data-bs-target attributes :

directly on the option,
on an inner a,
on an inner button.

None is working.

The closest which works is using a Bootstrap dropdown.

PS: the final objective is to implement dependent parent-child selects: you select a value in the parent select, and the corresponding child select is made visible.

<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/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>

Solution

You can use the :has() pseudo-class to show elements according to the option :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>