これは SO に関する私の最初の回答です。ここで何か間違ったことをした場合は、お知らせください。
最近、次のことを行うことでこれを達成できました。
CSS で「上に固定」項目の位置を「固定」に設定し、ドロップダウンの展開部分をスクロールしたときに残りの項目が背後に表示されないように必要に応じて調整します。
複数選択の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>