How to set ordering for default selected value in jQuery select2 remote select box?

Question

I customized the select2 plugin to display default selected values. I applied the select2 remote select box in the session create and edit page. When I create a session and select multiple speakers from the dropdown it displayed as they are selected.

Create page:

But when I edit another field for that session then the selected speakers are not displaying in order as they inserted

Edit page:

here is my jQuery code snippet:

$(".jsRemoteSelectBox").each(function (index, element) {
        if ($(element).data("isprocessed") != "1" && $(element).attr("isprocessed") != 1) {
            $(element).data("isprocessed", "1");
            $(element).attr("isprocessed", "1");
            select2SelectedResult = [];
            if ($(element).data("defaultvalue") != undefined) {
                select2SelectedResult = $(element).data("defaultvalue");
            }
            oOptionHtml = [];
            var oTargetControl = $(element).data('targetcontrol');
            $(element).select2({
                dropdownAutoWidth: true,
                allowClear: ($(element).data('allowclear') == "True" ? true : false),
                closeOnSelect: ($(element).data('iscloseonselect') == "True" ? true : false),
                width: '100%',
                placeholder: ($(element).data('placeholder') != undefined ? $(element).data('placeholder') : "Type to search"),
                ajax:
                {
                    url: $(element).data('url'),
                    type: "POST",
                    dataType: 'json',
                    data: function (params) {
                        return {
                            search: params.term,
                            pageResult: ($(element).data('pageresult') != undefined ? $(element).data('pageresult') : 10),
                            page: params.page,
                            notIn: (oTargetControl != undefined ? ($.isArray($("#" + oTargetControl).val()) ? $("#" + oTargetControl).val().join(",") : $("#" + oTargetControl).val()) : ($(element).data('fixedvalue') != undefined ? $(element).data('fixedvalue') : ""))
                        };
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;

                        return {
                            results: data.items,
                            pagination: {
                                more: (params.page * ($(element).data('pageresult') != undefined ? $(element).data('pageresult') : 10)) < data.total_count
                            }
                        };
                    },
                    cache: true
                },
                escapeMarkup: function (markup) { return markup; },
                minimumInputLength: ($(element).data('minlength') != undefined ? $(element).data('minlength') : 3),
                //templateResult: formatResult,
                templateResult: function (optionResult) {
                    if (optionResult.loading) return optionResult.text;
                    oOptionHtml = [];
                    oOptionHtml.push("");
                    if ($(element).data("isimagedisplay") == "True") {
                        oOptionHtml.push("");
                        oOptionHtml.push("");
                        oOptionHtml.push("");
                    }
                    oOptionHtml.push("");
                    oOptionHtml.push("");
                    oOptionHtml.push(optionResult.full_name);
                    oOptionHtml.push("");
                    oOptionHtml.push("");
                    if ($(element).data("isdescriptiondisplay") == "True") {
                        oOptionHtml.push("");
                        oOptionHtml.push(optionResult.description);
                        oOptionHtml.push("");
                    }
                    oOptionHtml.push("");

                    return oOptionHtml.join(" ");
                },
                templateSelection: formatResultSelection,
                data: select2SelectedResult
            });
            if (select2SelectedResult.length > 0) {
                $(element).val(select2SelectedResult.select('x.id'));
                $(element).trigger('change');
            }
        }
    });

Generated Html code on create page is:


    
        Select Speaker

        
        
            
                
                    
                        
                            
                        
                    
                
            
            
        
        
            Usage: Enter at least three characters to get speakers name suggestions. Select a value to continue adding more speakers.

Generated Html code on Edit page is:


    
        Select Speaker

        
        
            
                
                    
                        ×
                        
                            ×Angela  Xavier (Senior Exclusive Head)
                        
                        
                            ×Jon Patel ()
                        
                        
                            ×Haresh Yadav ()
                        
                        
                            
                        
                    
                
            
            
        
        
            Usage: Enter at least three characters to get speakers name suggestions. Select a value to continue adding more speakers.

Please help me with this issue.

user_5855884 · Answer

As per my understanding, you need to add one Sequence field in the model.

Your model should be like this.

public string id { get; set; } // id for drop-down value
public string text { get; set; } // text for drop-down text visible in select control
public int? Sequence { get; set; } // this is the new filed you have to manage when you select multiple option in drop-down and store in db level.

after then need to change you're select2 partial helper

if (Model.DefaultSelectedValue != null && Model.DefaultSelectedValue.Count > 0)
{
        HtmlAttributes.Add("data-defaultValue", JsonConvert.SerializeObject(Model.DefaultSelectedValue.OrderBy(x=>x.Sequence),
        Formatting.Indented));
}

Note: I've also built the same select2 helper but not much like you and I also facing the issue while inserting if I'm select value like 2,5,1,4 while edit values show 1,2,4,5.

if you still face the issue let me know so we can connect.

user_7380779 · Answer

its not an easier solution, here a sample showing what you want (event on select selecting, unselect unselecting):

$('#example').select2();

$('#example').on("select2:selecting select2:unselecting", function (evt) {
    var _id = evt.params.args.data._resultId.match(/select2-(\w+)-result/)[1];
    var ul = $(`ul#select2-${_id}-container`)
    var tmpord = ul.children('li').map((idx, elm) => CSS.escape(elm.title)).get()
    tmpord.push(CSS.escape(evt.params.args.data.text))
    ul.data('tmpord', tmpord)
}).on("select2:select select2:unselect", function (evt) {
    var _id = evt.params.data._resultId.match(/select2-(\w+)-result/)[1];
    var ul = $(`ul#select2-${_id}-container`);
    ;(ul.data('tmpord')||[]).forEach(tp => {
        var li = ul.children(`li[title="${tp}"]:contains("${tp}")`)
        li.detach().appendTo(ul)
    })
});

it is using the internal undocumented _resultId property its a hack, there's no guarantee this property will always be there

a solution with data from json or array:

    var sampleArray = [
    {id: 0, text: 'enhancement'},
    {id: 1, text: 'bug'},
    {id: 2, text: 'duplicate'},
    {id: 3, text: 'invalid'},
    {id: 4, text: 'wontfix'}];

    $("#e10").select2({
      data: sampleArray
    });
    
        $('#e10').on("select2:selecting select2:unselecting", function(evt) {
      var _id = evt.params.args.data._resultId.match(/select2-(\w+)-result/)[1];
      var ul = $(`ul#select2-${_id}-container`)
      var tmpord = ul.children('li').map((idx, elm) => CSS.escape(elm.title)).get()
      tmpord.push(CSS.escape(evt.params.args.data.text))
      ul.data('tmpord', tmpord)
    }).on("select2:select select2:unselect", function(evt) {
      var _id = evt.params.data._resultId.match(/select2-(\w+)-result/)[1];
      var ul = $(`ul#select2-${_id}-container`);;
      (ul.data('tmpord') || []).forEach(tp => {
        var li = ul.children(`li[title="${tp}"]:contains("${tp}")`)
        li.detach().appendTo(ul)
      })
    });

How to set ordering for default selected value in jQuery select2 remote select box?

2 Answers