我正在使用 bootstrap-multiselect https://github.com/davidstutz/bootstrap-multiselect带过滤选项。一切正常。 我的下拉菜单有大约 80-90 个值，因此我必须提供滚动。但问题是，当我添加滚动时，搜索框也会滚动，并且当我转到最后一个值时它会被隐藏。我需要确保搜索框将保留在顶部，并且选项将在其下方滚动。
因此，我查看了 bootstrap-multiselect 创建的 HTML 代码，发现搜索控件也包含在同一父级中。
<ul class="multiselect-container dropdown-menu" aria-expanded="false">
<li class="multiselect-item filter" value="0" role="menuitem">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input type="text" class="form-control multiselect-search" placeholder="Search">
<span class="input-group-btn"><button type="button" class="btn btn-default multiselect-clear-filter"><i class="glyphicon glyphicon-remove-circle"></i></button></span>
</div>
</li>
<li role="menuitem"><a tabindex="0"><label class="radio"><input type="radio" value=""> Please select</label></a></li>
<li class="multiselect-item multiselect-group" role="menuitem"><label>Test</label></li>
<li role="menuitem"><a tabindex="0"><label class="radio"><input type="radio" value="1"> Item 1</label></a></li>
</ul>
使用的 CSS:-
ul.dropdown-menu {
font-size: 1.1em;
max-height: 300px;
overflow: auto;
z-index: 9999;
}
是否有任何 CSS 技巧可以让我使用并使搜索框固定并且选项将在其下方滚动？ 我已经检查了库提供的模板选项，但没有成功？
谢谢
最佳答案
这是我对SO的第一个回答，如果我在这里做错了什么，请告诉我。
我最近通过执行以下操作实现了这一目标:
在 CSS 中，将“卡住在顶部”元素的位置设置为“固定”，并根据需要进行调整，以便滚动下拉列表的展开部分时，其余元素在其后面不可见。
在多选的
onDropdownShown事件中，调用一个函数(请参阅下面 fiddle 中的resetDropdownHeight())，该函数将调整多选的展开部分的高度基于冷冻元素高度的下拉菜单。为了在过滤时保持正确的下拉高度，修改bootstrap-multiselect.js中的
buildFilter:函数，调用resetDropdownHeight()函数。如果使用可折叠选项组，请在$('li.multiselect-group > a', this.$ul)的点击事件中执行相同的操作。
我不清楚如何在示例 fiddle 中演示第 #3 项(上面)，因此这里是在 bootstrap-multiselect.js 的修改版本中调用 resetDropdownHeight() 的位置:
构建过滤器:
1. 将其作为 clearBtn.on 事件的最后一行调用
2. 将其作为 this.searchTimeout
$('li.multiselect-group > a', this.$ul) 的“点击”事件:
1.将其称为事件的最后一行
请参阅此处的示例(仅包括#1和#2):https://jsfiddle.net/mjh42/v3bc9udk/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css"/>
<script type="text/javascript" src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<style type="text/css">
#freezeDemo + div.btn-group li.multiselect-filter {
position: fixed;
left: 1px; /* workaround for "position fixed" issue in Chrome desktop */
top: 35px;
width: 162px;
z-index: 10;
background-color: white;
}
#freezeDemo + div.btn-group li.multiselect-all {
position: fixed;
left: 1px; /* workaround for "position fixed" issue in Chrome desktop */
top: 75px;
width: 162px;
z-index: 10;
background-color: white;
border-bottom: 1px solid;
}
#freezeDemo + div.btn-group ul.multiselect-container.dropdown-menu > li:not(.multiselect-filter):not(.multiselect-all) {
position: relative;
top: 65px;
}
#freezeDemo + div.btn-group ul.multiselect-container.dropdown-menu {
top: 34px;
width: 180px;
}
</style>
</head>
<body>
<select id="freezeDemo" multiple="multiple">
<optgroup label="Group A">
<option value="A1">Item A1</option>
<option value="A2">Item A2</option>
<option value="A3">Item A3</option>
<option value="A4">Item A4</option>
<option value="A5">Item A5</option>
</optgroup>
<optgroup label="Group B">
<option value="B1">Item B1</option>
<option value="B2">Item B2</option>
<option value="B3">Item B3</option>
<option value="B4">Item B4</option>
<option value="B5">Item B5</option>
</optgroup>
</select>
<script type="text/javascript">
var $_dropdownMenu = null;
initializeBootstrapMultiselect();
function initializeBootstrapMultiselect() {
$('#freezeDemo').multiselect({
buttonWidth: '180px',
enableCollapsibleOptGroups: true,
includeSelectAllOption: true,
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
maxHeight: 200,
onDropdownShown: function(event) {
resetDropdownHeight();
}
});
$_dropdownMenu = $('#freezeDemo + div.btn-group > button.multiselect.dropdown-toggle.btn.btn-default ~ ul.multiselect-container.dropdown-menu');
}
function resetDropdownHeight() {
if ($_dropdownMenu !== null) {
$_dropdownMenu.css('height', 'auto');
var filterHeight = $('li.multiselect-filter', $_dropdownMenu).height();
var selectAllHeight = $('li.multiselect-all', $_dropdownMenu).height();
if (isNaN(filterHeight)) { filterHeight = 0 }
if (isNaN(selectAllHeight)) { selectAllHeight = 0 }
var heightAdjustment = filterHeight + selectAllHeight;
var currentDropdownHeight = $_filterDropdownMenu.height();
var newHeight = (currentDropdownHeight + heightAdjustment).toString() + 'px';
$_dropdownMenu.css('height', newHeight);
}
}
</script>
</body>
</html>
关于jquery - 更改 Bootstrap 多选布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32709908/