SOURCE

console 命令行工具 X clear

                    
>
console
$(function () {
    // https://www.it1352.com/1022288.html
    //let data = [{"text": "选项一", id: "1"},{"text": "选项二", id: "2"},{"text": "选项三", id: "3"},{"text": "选项四", id: "4"},{"text": "选项五", id: "5"}];
    $("#opt").select2({
        width: '500px',
        placeholder: '请选择',
        //data: data
    });
    $('#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="展示默认选中选项">

本项目引用的自定义外部资源