提问人：London Smith 提问时间：11/4/2023 最后编辑：London Smith 更新时间：11/5/2023 访问量：98
bootstrap-select selectpicker 无法在下拉菜单中选择
bootstrap-select selectpicker can't choose in dropdown-menu
问：
我找不到在下拉菜单中使用插件引导选择的方法。
选择只是不显示。
我添加了这个jQuery，不要通过单击它来关闭下拉菜单：
$(document).on("click", ".menuplus", function (e) {
e.stopPropagation();
});
而且我不认为它因为这种情况而没有出现。stopPropagation
我做了一个 jsfiddle 所需的最低限度，我觉得这是 bootstrap-select 插件错误！
有机会让它发挥作用吗？
https://jsfiddle.net/d3yqo9wc/4/
这一切都与旧版本的 Bootstrap 4 /jQuery 3.3.1 有关，因为我们从事的项目就是使用它！
溶液
多亏了@Swati回复，我可以更新 jsfiddle：
https://jsfiddle.net/jdtnsmwu/46/
这怎么能更好？:)
答：
1赞
Swati
11/5/2023
#1
解决此问题的一种方法是手动控制下拉菜单的行为。因此，每当单击菜单时，都会从下拉列表中添加/删除类显示以及从下拉菜单中显示。
此外，现在还添加了一些代码，用于在 .您可以添加类似的代码以使选择按钮正常工作。dropdown-div
演示代码：
$('button.dropdown-toggle').on('click', function(event) {
$(this).parent().toggleClass('show') //addor remove class
$(this).attr('aria-expanded', $(this).attr('aria-expanded') == 'false' ? 'true' : 'false'); //add true or false
$("div[aria-labelledby=" + $(this).attr('id') + "]").toggleClass('show') //add class/remove
});
$('body').on('click', function(e) {
//check if the click occur outside `dropdown-div` tag if yes ..hide menu
if (!$('#dropdown-div').is(e.target) &&
$('#dropdown-div').has(e.target).length === 0 &&
$('.show').has(e.target).length === 0
) {
//remove clases and add attr
$('#dropdown-div').removeClass('show')
$('#dropdown-div > button').attr('aria-expanded', 'false');
$("#dropdown-div").children('div.dropdown-menu').removeClass('show')
}
});<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.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.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script>
<h1>Hello, world!</h1>
<select id="SelectGlobalSearch" class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<!--added id -->
<div id="dropdown-div" class="dropdown mt-5">
<!-- removed data-toggle="dropdown"-->
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu menuplus text-center" aria-labelledby="dropdownMenu2">
<div class="p-5">
<select id="SelectGlobalSearch2" class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<button class="btn btn-primary">
Choose
</button>
</div>
</div>
评论