【发布时间】：2021-03-18 05:11:39
【问题描述】：
我自定义了 select2 插件以显示默认选择值。我在会话创建和编辑页面中应用了 select2 远程选择框。当我创建会话并从下拉列表中选择多个演讲者时，它会显示为它们被选中。
但是，当我为该会话编辑另一个字段时，所选发言人在插入时不会按顺序显示
这是我的 jQuery 代码 sn-p：
$(".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("<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>
Edit 页面上生成的 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="[{"id":"2","text":"Angela Xavier (Senior Exclusive Head)","ImageUrl":"cf0fab51-84af-43b6-9c4b-7e96227f4e95_images.jpg","SessionID":1056},{"id":"1","text":"Jon Patel ()","ImageUrl":"7844b969-e793-4af3-899c-0d28bc97da18_download_(2).png","SessionID":1056},{"id":"3","text":"Haresh Yadav ()","ImageUrl":"28937477-3e2d-4166-aad8-758ffe6ad17b_Beacon_logo_FINAL_white_&_green.jpg","SessionID":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>
请帮我解决这个问题。
【问题讨论】：
-
服务器有这个问题吗？还是您在本地机器上也遇到了问题？
-
@jishansiddique，我只在服务器上遇到这个问题。它在本地机器上运行良好
-
好的，Harvi Patel 你在 MVC 中创建了一个 select2 助手吗？我可以在编辑历史记录中看到它。
-
是的 @jishansiddique，我在 MVC 中创建了一个 select2 助手。那个助手有什么问题吗？
标签： jquery jquery-select2