如何在 jQuery select2 远程选择框中设置默认选定值的顺序？
我自定义了 select2 插件以显示默认选定值。我在会话创建和编辑页面中应用了 select2 远程选择框。当我创建一个会话并从下拉列表中选择多个演讲者时，它会在选择时显示。
创建页面：
但是当我为该会话编辑另一个字段时，选定的扬声器没有按插入顺序显示
编辑页面：
这是我的 jQuery 代码片段：
$(".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>
在编辑页面上生成的 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>
请帮我解决这个问题。
2 个答案:
答案 0 :(得分：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 && 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}，我在插入时也遇到了这个问题}.
如果您仍然遇到问题，请告诉我，以便我们联系。
答案 1 :(得分：0)
这不是一个更简单的解决方案，这里是一个显示您想要的示例（选择选择时的事件，取消选择取消选择）：
$('#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" />
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？