console
$(function () {
$("#opt").select2({
width: '500px',
placeholder: '请选择',
});
$('#btn').click(function () {
console.log($("#opt").select2('val'));
$("#opt").select2('data').forEach(function (item) {
console.log(item.id, item.text);
})
});
$("#opt").parent().find("ul.select2-selection__rendered").sortable({
containment: 'parent',
update: function () {
orderSortedValues();
}
});
$('#btned').click(function() {
$("#opt").val(['5','2', '4', '1']).trigger('change');
});
stopAutomaticOrdering();
})
orderSortedValues = function () {
$("#opt").parent().find("ul.select2-selection__rendered").children("li[title]").each(function (i, obj) {
var element = $("#opt").children("option[value=" + obj.title + "]");
moveElementToEndOfParent(element)
});
};
moveElementToEndOfParent = function (element) {
var parent = element.parent();
element.detach();
parent.append(element);
};
stopAutomaticOrdering = function () {
$("#opt").on("select2:select", function (evt) {
var id = evt.params.data.id;
var element = $(this).children("option[value=" + id + "]");
moveElementToEndOfParent(element);
$(this).trigger("change");
});
}
<link href="https://cdn.bootcdn.net/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/select2/4.0.0/js/select2.js"></script>
<script src="https://www.jq22.com/demo/jquery-sortable201703301817/js/jquery-sortable.js"></script>
<select placeholder="选项" multiple id="opt">
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
<option value="4">选项四</option>
<option value="5">选项五</option>
</select>
<input type="button" id="btn" value="获取选中选项">
<input type="button" id="btned" value="展示默认选中选项">