Как установить порядок для выбранного значения по умолчанию в поле удаленного выбора jQuery select2?

ProgramBox

Как установить порядок для выбранного значения по умолчанию в поле удаленного выбора jQuery select2?

Post author:admin
Запись опубликована:26 января, 2022
Post category:Вопросы по программированию

#jquery #jquery-select2

Вопрос:

Я настроил плагин select2 для отображения выбранных значений по умолчанию. Я применил поле удаленного выбора select2 на странице создания и редактирования сеанса. Когда я создаю сеанс и выбираю несколько динамиков из выпадающего списка, он отображается по мере их выбора.

Создать страницу:

Но когда я редактирую другое поле для этого сеанса, выбранные динамики отображаются не в том порядке, в каком они были вставлены

Страница редактирования:

вот мой фрагмент кода jQuery:

 $(".jsRemoteSelectBox").each(function (index, element) {
        if ($(element).data("isprocessed") != "1" amp;amp; $(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("<div class='select2-result-repository clearfix'>");
                    if ($(element).data("isimagedisplay") == "True") {
                        oOptionHtml.push("<div class='select2-result-repository__avatar'>");
                        oOptionHtml.push("<img src='"   optionResult.imageurl   "' />");
                        oOptionHtml.push("</div>");
                    }
                    oOptionHtml.push("<div class='select2-result-repository__meta'>");
                    oOptionHtml.push("<div class='select2-result-repository__title'>");
                    oOptionHtml.push(optionResult.full_name);
                    oOptionHtml.push("</div>");
                    oOptionHtml.push("</div>");
                    if ($(element).data("isdescriptiondisplay") == "True") {
                        oOptionHtml.push("<div class='select2-result-repository__description'>");
                        oOptionHtml.push(optionResult.description);
                        oOptionHtml.push("</div>");
                    }
                    oOptionHtml.push("</div>");

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

Сгенерированный Html-код на странице создания:

 <div class="row">
    <div class="col-md-12 form-group">
        <label>Select Speaker</label>

        <select class="jsRemoteSelectBox form-control select2-hidden-accessible" data-allowclear="True" data-iscloseonselect="True" data-isdescriptiondisplay="False" data-isimagedisplay="True" data-minlength="3" data-pageresult="10" data-placeholder="Type to search speaker" data-targetcontrol="jsClientID" data-url="/Speakers/SearchSpeakers" id="SpeakerIDs" multiple="" name="SpeakerIDs" isprocessed="1" data-select2-id="SpeakerIDs" tabindex="-1" aria-hidden="true">
        </select>
        <span class="select2 select2-container select2-container--default select2-container--focus" dir="ltr" data-select2-id="6" style="width: 100%;">
            <span class="selection">
                <span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1" aria-disabled="false">
                    <ul class="select2-selection__rendered">
                        <li class="select2-search select2-search--inline">
                            <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="searchbox" aria-autocomplete="list" placeholder="Type to search speaker" style="width: 1238px;">
                        </li>
                    </ul>
                </span>
            </span>
            <span class="dropdown-wrapper" aria-hidden="true"></span>
        </span>
        <div>
            <small>Usage: Enter at least three characters to get speakers name suggestions. Select a value to continue adding more speakers.</small>
        </div>

        <span class="field-validation-valid red" data-valmsg-for="SpeakerIDs" data-valmsg-replace="true"></span>
    </div>
</div>

Сгенерированный Html-код на странице редактирования является:

 <div class="row">
    <div class="col-md-12 form-group">
        <label>Select Speaker</label>

        <select class="jsRemoteSelectBox form-control select2-hidden-accessible" data-allowclear="True" data-defaultvalue="[{amp;quot;idamp;quot;:amp;quot;2amp;quot;,amp;quot;textamp;quot;:amp;quot;Angela  Xavier (Senior Exclusive Head)amp;quot;,amp;quot;ImageUrlamp;quot;:amp;quot;cf0fab51-84af-43b6-9c4b-7e96227f4e95_images.jpgamp;quot;,amp;quot;SessionIDamp;quot;:1056},{amp;quot;idamp;quot;:amp;quot;1amp;quot;,amp;quot;textamp;quot;:amp;quot;Jon Patel ()amp;quot;,amp;quot;ImageUrlamp;quot;:amp;quot;7844b969-e793-4af3-899c-0d28bc97da18_download_(2).pngamp;quot;,amp;quot;SessionIDamp;quot;:1056},{amp;quot;idamp;quot;:amp;quot;3amp;quot;,amp;quot;textamp;quot;:amp;quot;Haresh Yadav ()amp;quot;,amp;quot;ImageUrlamp;quot;:amp;quot;28937477-3e2d-4166-aad8-758ffe6ad17b_Beacon_logo_FINAL_white_amp;amp;_green.jpgamp;quot;,amp;quot;SessionIDamp;quot;:1056}]" data-iscloseonselect="True" data-isdescriptiondisplay="False" data-isimagedisplay="True" data-minlength="3" data-pageresult="10" data-placeholder="Type to search speaker" data-targetcontrol="jsClientID" data-url="/Speakers/SearchSpeakers" id="SpeakerIDs" multiple="" name="SpeakerIDs" isprocessed="1" data-select2-id="SpeakerIDs" tabindex="-1" aria-hidden="true">
            <option value="2" data-select2-id="17">Angela  Xavier (Senior Exclusive Head)</option>
            <option value="1" data-select2-id="18">Jon Patel ()</option>
            <option value="3" data-select2-id="19">Haresh Yadav ()</option>
        </select>
        <span class="select2 select2-container select2-container--default select2-container--focus" dir="ltr" data-select2-id="16" style="width: 100%;">
            <span class="selection">
                <span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1" aria-disabled="false">
                    <ul class="select2-selection__rendered">
                        <span class="select2-selection__clear" title="Remove all items" data-select2-id="23">×</span>
                        <li class="select2-selection__choice" title="Angela  Xavier (Senior Exclusive Head)" data-select2-id="20">
                            <span class="select2-selection__choice__remove" role="presentation">×</span>Angela  Xavier (Senior Exclusive Head)
                        </li>
                        <li class="select2-selection__choice" title="Jon Patel ()" data-select2-id="21">
                            <span class="select2-selection__choice__remove" role="presentation">×</span>Jon Patel ()
                        </li>
                        <li class="select2-selection__choice" title="Haresh Yadav ()" data-select2-id="22">
                            <span class="select2-selection__choice__remove" role="presentation">×</span>Haresh Yadav ()
                        </li>
                        <li class="select2-search select2-search--inline">
                            <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="searchbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;">
                        </li>
                    </ul>
                </span>
            </span>
            <span class="dropdown-wrapper" aria-hidden="true"></span>
        </span>
        <div>
            <small>Usage: Enter at least three characters to get speakers name suggestions. Select a value to continue adding more speakers.</small>
        </div>

        <span class="field-validation-valid red" data-valmsg-for="SpeakerIDs" data-valmsg-replace="true"></span>
    </div>
</div>

Пожалуйста, помогите мне с этим вопросом.

1. Эта проблема связана с сервером? или вы также столкнулись с проблемой на локальном компьютере?

2. @jishansiddique, я сталкиваюсь с этой проблемой только на сервере. Он отлично работает на локальной машине

3. Хорошо, Харви Патель, ты создал помощника select2 в MVC? Я вижу это в истории редактирования.

4. Да @jishansiddique, я создал помощника select2 в MVC. Есть ли какие-либо проблемы с этим помощником?

Ответ №1:

Насколько я понимаю, вам нужно добавить одно Sequence поле в модель.

Ваша модель должна быть такой.

 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.

после этого вам нужно измениться, вы select2 partial helper

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

Примечание: Я также создал то же select2 helper самое, но не так, как вы, и я также столкнулся с проблемой при вставке, если я выбираю значение, например 2,5,1,4 , при отображении значений редактирования 1,2,4,5 .

если вы все еще сталкиваетесь с этой проблемой, дайте мне знать, чтобы мы могли подключиться.

Ответ №2:

это не простое решение, вот пример, показывающий, что вы хотите (событие при выборе выбора, отмене выбора, отмене выбора).:

 $('#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)
    })
});

 <html>
  <body>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select id="example" multiple="multiple" style="width: 300px">
    <option value="Apple">Apple</option>
    <option value="Bat">Bat</option>
    <option value="Cat">Cat</option>
    <option value="Dog">Dog</option>
    <option value="Elephant">Elephant</option>
    <option value="View/Exposure">View/Exposure</option>
    <option value="View / Exposure">View / Exposure</option>
    <option value="Dummy - Data">Dummy - Data</option>
    <option value="Dummy-Data">Dummy-Data</option>
    <option value="Dummy:Data">Dummy:Data</option>
    <option value="Dummy(Data)">Dummy(Data)</option>    
</select>

  </body>
</html>

он использует внутреннее недокументированное свойство
_resultId, это взлом, нет никакой гарантии, что это свойство всегда будет там

решение с данными из json или массива:

     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)
      })
    });

 <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<input type="hidden" id="e10" multiple="multiple" style="width:300px" />

1. Спасибо @Frenchy за вашу помощь. Это не работает для меня, потому что я не получаю свойство _resultId в select2:select select2:unselect событии

2. не могли бы вы показать свой html-код с помощью select, и вы используете последнюю версию select2?

3. я показываю второй образец с данными из массива или json, а не из select, и результат тот же, если тип ввода скрыт

4. Ваш второй пример кода такой же, как и первый, так что это не работает. Я также добавил соответствующий HTML-код. Я использую версию Select2 4.0.11.

5. нет, это не то же самое, во-вторых, используйте ввод данных из массива или json, у первых есть параметры, определенные в html. Поэтому я не понимаю, как генерируется ваш html, не могли бы вы показать свой html, сгенерированный до внедрения select2?

Метки: Как установить порядок для выбранного значения по умолчанию в поле удаленного выбора jQuery select2?