提问人：jason bikari 提问时间：10/30/2023 最后编辑：Hind Sagar Biswasjason bikari 更新时间：10/31/2023 访问量：118
如何在下拉列表中显示所选项目
how to show selected item in dropdown
问：
我有如下所示的代码 [我正在使用 JQuery 和 Bootstrap 4]：
$('.dropdown-menu li').on('click', function() {
var getValue = $(this).text();
$('.dropdown-select').text(getValue);
});<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="col-auto p-2 col-5">
<div class="dropdown">
<button id="dLabel" class="dropdown-select" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</div>
</div>通过单击任何下拉选项，未选中且不显示。
答：
-1赞
Firdaus
10/30/2023
#1
如果我理解正确的话。你需要这样的东西：
- 创建索引 .html
- 创建样式.css
- 创建下拉列表.js
function myFunction() {
var dropdownMenu = document.getElementById("myDropdown");
if (dropdownMenu.style.display === "block") {
dropdownMenu.style.display = "none";
} else {
dropdownMenu.style.display = "block";
}
}.dropbtn {
background-color: #000fb7;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.show {
display: block;
}<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#yourlink1">Option 1</a>
<a href="#yourlink2">Option 2</a>
<a href="#yourlink3">Option 3</a>
</div>Defer 表示---页面完成解析后执行的脚本
评论
0赞
Hind Sagar Biswas
10/30/2023
1. 我不认为这将是答案，而且他的问题也不清楚 2.这并不能解决任何问题，您只是添加了自定义 CSS 和 js 而不是 bootstrap。您还删除了原始功能，即在标签上显示所选值
0赞
imhvost
10/31/2023
#2
推开您选择的，因为页面上可以有多个。
只需将类添加到此列表中即可。<li>.dropdownactive<li>
$(document).on('click', '.dropdown-menu li', function() {
const li = $(this);
li.closest('.dropdown-menu').find('li').removeClass('active');
li.addClass('active');
li.closest('.dropdown').find('.dropdown-select').text( li.text() );
});.dropdown-menu .active {
background: yellow;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="col-auto p-2 col-5">
<div class="dropdown">
<button id="dLabel" class="dropdown-select" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</div>
</div>上一个：第二个选择日期未出现在选项列表中
评论