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