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="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="/[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>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/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr/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>1 Answer
Reset to default 2You 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>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744308802a4567848.html
optionelements is text, trying to stickaorbuttonin there makes little sense to begin with. – C3roe Commented Mar 24 at 9:54