我会按特定顺序预先选择项目。
在此示例中,我预先选择了 ID 为 36、17 和 42 的资源。因此,我希望它们按 42、17 和 36 的顺序显示,但 select2 按字母顺序显示我。
谁来帮帮我
var PRESELECTED_RESSOURCES = ['42', '36', '17'];
// Function search start one character
function matchStart(params, data) {
params.term = params.term || '';
if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
return data;
}
return false;
}
// Function search start one character
(function($) {
$.fn.extend({
select2_sortable: function() {
var select = $(this);
$(select).select2({
width: '100%',
placeholder: 'Select ressources',
matcher: function(params, data) {
return matchStart(params, data);
},
createTag: function(params) {
return undefined;
},
language: "fr"
});
var ul = $(select).next('.select2-container').first('ul.select2-selection__rendered');
ul.sortable({
placeholder: 'ui-state-highlight',
forcePlaceholderSize: true,
items: 'li:not(.select2-search__field)',
tolerance: 'pointer',
stop: function() {
$($(ul).find('.select2-selection__choice').get().reverse()).each(function() {
var id = $(this).data('data').id;
var option = select.find('option[value="' + id + '"]')[0];
$(select).prepend(option);
});
}
});
}
});
}(jQuery));
$('#essentiels').select2_sortable()
$("#essentiels").val(PRESELECTED_RESSOURCES).trigger("change");
//Function
$("select").on("select2:select", function(evt) {
var element = evt.params.data.element;
var $element = $(element);
$element.detach();
$(this).append($element);
$(this).trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<select class="js-example-basic-multiple" name="essentiels[]" multiple="" id="essentiels" aria-hidden="true">
<option value="17">A to Z BASE REVUES & E-BOOKS</option>
<option value="33">FREE LIBRARY</option>
<option value="35">HAL - HYPER ARTICLE EN LIGNE</option>
<option value="9">IEEE Xplore</option>
<option value="36">IOP : INSTITUTE OF PHYSICS PUBLISHING - REVUES (Licence nationale)</option>
<option value="40">JSTOR (Journals Storage)</option>
<option value="10">KHEOX</option>
<option value="11">Kompass</option>
<option value="41">LINGUEE - TRADUCTEUR FRANCAIS/ANGLAIS</option>
<option value="42">NATURE</option>
<option value="46">OPEN GREY (anciennement OPEN SIGLE)</option>
<option value="48">PERSEE</option>
</select>
最佳答案
我尝试了相同的代码片段,但我发现它没有按字母顺序显示。它根据选项的顺序显示,从第一个选项开始查找并解析所有选项。我刚刚放置了如下选项,当我运行代码片段时,它按顺序显示 42 、 17 和 36
<option value="42">NATURE</option>
<option value="17">A to Z BASE REVUES & E-BOOKS</option>
<option value="33">FREE LIBRARY</option>
<option value="35">HAL - HYPER ARTICLE EN LIGNE</option>
<option value="9">IEEE Xplore</option>
<option value="36">IOP : INSTITUTE OF PHYSICS PUBLISHING - REVUES(Licence nationale)</option>
<option value="40">JSTOR (Journals Storage)</option>
<option value="10">KHEOX</option>
<option value="11">Kompass</option>
<option value="41">LINGUEE - TRADUCTEUR FRANCAIS/ANGLAIS</option>
<option value="46">OPEN GREY (anciennement OPEN SIGLE)</option>
<option value="48">PERSEE</option>
希望这有帮助。
关于jquery - Select2 - 预选可排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39124149/