我正在使用Bootstrap-Select对于一个项目,我有一个问题 multiple
列表。我的应用程序必须满足以下要求。
更新:
基于@caseyjhol很好的答案,我开始尝试实现这个和here是一个 JSFiddle。
要求:
1)我需要将所选项目渲染在列表顶部,而不是在其原始位置。这是因为如果我有一个很大的列表,我不希望用户必须向下滚动所有列表来检查那些带有勾号的项目。因此,我将所有选定的内容渲染在顶部,然后是分隔线,然后是未选定的内容。
假设原始列表是 A B C D E F
以该顺序。所以..如果我点击C
,列表应变为 C A B C D E F
。如果我然后单击 E
,它应该变成C E A B D F
。
这部分要求确实有效。
2) 但是,如果我现在再次取消选择(单击)E
,那么列表应变为 C A B D E F
。这部分不起作用,我不知道该怎么做。
3)从选定的项目(位于顶部的项目)中,我想允许使用 jQueryUI sortable
通过拖放对它们进行排序。这样,用户不仅可以选择哪些选项,还可以选择顺序。
例如,假设我点击了 C
,然后E
,列表现在为 C E A B D F
。从这里开始,我应该只允许对 C E
进行排序部分。现在,假设我拖动 C
并将其放在E
之后。 Bootstrap <ul>
正确显示为 E C A B D F
(这就是我需要的)。但是现在,当我提交表单时,html列表仍然是旧的顺序 C E A B D F
。所以我仍然无法应用 <ul>
的状态进入html选择。
我尝试尽可能多地记录我的要求。任何帮助表示赞赏。
提前致谢
最佳答案
每个 li
元素都有一个 data-original-index
属性。这告诉您原始 select
元素中选项的索引。我不确定你的确切用例是什么。如果您只是尝试对选项进行排序,以便所选选项位于顶部,我认为对选择本身执行排序,然后使用 .selectpicker( 更新 bootstrap-select ) 会更有意义'刷新')
。如果出于某种原因您需要对 li 元素执行排序,我会这样做:
$(window).on('load', function() {
var $menu = $('#myList').data('selectpicker').$menu,
$options = $('#myList').find('option');
function updateOptions() {
var optionArray = [];
$menu.find('li').each(function(i, el) {
optionArray.push($options.eq($(el).data('originalIndex')));
});
$('#myList').append(optionArray);
// for displaying current order of options
$('#myList').trigger('showOptions');
}
// for displaying current order of options
$('#myList').on('loaded.bs.select showOptions', function() {
$('#options').empty();
var arr = [];
$(this).find('option').each(function() {
arr.push($(this).val());
});
$('#options').append(arr.join(', '));
});
setTimeout(function() {
// move the first li to the end of the list
$menu.find('li').eq(0).appendTo($menu.find('ul'));
// for displaying current order of options
$('#myList').trigger('showOptions');
// update the order of the options to match the list
updateOptions();
}, 500);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/silviomoreto/bootstrap-select/master/dist/css/bootstrap-select.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/silviomoreto/bootstrap-select/master/dist/js/bootstrap-select.js"></script>
<select id="myList" class="selectpicker" multiple>
<option value="Aberdare">Aberdare</option>
<option value="Berdeen">Berdeen</option>
<option value="Crington">Crington</option>
</select>
<div id="options"></div>
您需要在生产过程中做一些不同的事情(例如确保原始索引正确更新),但这应该为您指明正确的方向。
关于javascript - Bootstrap-select 与顶部选定和 jQuery 可排序集成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38958351/