Início / coding / Perguntas / 79527728
Accepted
Pragmateek
Asked: 2025-03-23 00:23:39 +0800 CST

Alterne a visibilidade do elemento recolhível com select

  • 772

Existe uma maneira de alternar a visibilidade dos elementos com um select's options?

Tentei colocar os atributos data-bs-toggle/ :data-bs-target

  • diretamente no option,
  • em um interior a,
  • em um interior button.

Nenhum está funcionando.

O mais próximo que funciona é usar um menu suspenso do Bootstrap.

PS: o objetivo final é implementar pais-filhos dependentes select: você seleciona um valor no pai selecte o filho correspondente selectfica visível.

<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 respostas

  1. Best Answer

    Você pode usar a :has()pseudoclasse para mostrar elementos de acordo com a opção :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

relate perguntas