这是我对SO的第一个回答，如果我在这里做错了什么，请告诉我。
我最近能够通过执行以下操作来完成此任务：
在 CSS 中，将“frozen at top”项目的位置设置为“fixed”，并根据需要进行调整，以便在滚动下拉列表的展开部分时其余项目在其后面不可见。
在多选onDropdownShown事件中，调用一个函数（参见resetDropdownHeight()下面的小提琴），该函数将根据冻结项目的高度调整下拉列表展开部分的高度。
为了在过滤时保持正确的下拉高度，修改buildFilter:bootstrap-multiselect.js中的函数以便调用该resetDropdownHeight()函数。如果正在使用可折叠选项组，请在单击事件中为$('li.multiselect-group > a', this.$ul).
我不清楚如何在示例小提琴中演示第 3 项（上图），所以这里是resetDropdownHeight()在您修改后的 bootstrap-multiselect.js 版本中调用的地方：
buildFilter:
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>