我在新版本 4.0 中遇到了这个问题,并且无法找到任何答案,直到我自己在工作了几个小时后解决了这个问题。
问问题
4643 次
2 回答
6
我的解决方法:
首先,使用 jquery 使其可排序。
$("#mySelect").parent().find("ul.select2-selection__rendered").sortable({
containment: 'parent',
update: function() {
orderSortedValues();
}
});
函数 orderSortedValues 的思路如下:改变原来 select 输入的选项顺序,并通知 select2 新的顺序。
orderSortedPassageValues = function() {
$("#mySelect").parent().find("ul.select2-selection__rendered").children("li[title]").each(function(i, obj){
var element = $("#mySelect").children("option[value="+obj.title+"]");
moveElementToEndOfParent(element)
});
};
moveElementToEndOfParent = function(element) {
var parent = element.parent();
element.detach();
parent.append(element);
};
最后,还需要通过下拉菜单选择新值来停止自动排序
stopAutomaticOrdering = function() {
$("#mySelect").on("select2:select", function (evt) {
var id = evt.params.data.id;
var element = $(this).children("option[value="+id+"]");
moveElementToEndOfParent(element);
$(this).trigger("change");
});
}
PS:函数的范围是全局的。你可以改变它...希望能帮助别人。
于 2016-02-22T19:28:46.803 回答
0
当重新排列原始选择列表时,我遇到了下拉选项更改的问题。
所以我最终做的是创建一个隐藏字段。
This field gets updated when the select changes.
<select class="select2field" name="FieldSelect" data-select2target="field-hiddenfield" multiple="">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<input type="hidden" name="FieldData" value="" class="hidden" id="field-hiddenfield">
然后我更新了 JS 以在发生排序或选择新项目时更新字段。
var select2field = 'select.select2field';
$(select2field).select2({
templateSelection: function (data, container) {
// Add custom attributes to the <option> tag for the selected option
var element = $(data.element);
element.attr('data-content', element.html());
return data.text;
},
closeOnSelect: false,
multiple: true,
placeholder: 'Select..',
width: '100%'
});
var origSelect = $('#mySelect');
var select2Select = $("#mySelect").parent().find("ul.select2-selection__rendered");
function updateHiddenField() {
var values = [];
select2Select.children("li[title]").each(function(i, obj){
values.push(origSelect.children("option[data-content='"+obj.title+"']").attr('value'));
});
// Update the hidden field.
$('#' + origSelect.data('select2target')).val(values.join(','));
}
select2Select.sortable({
containment: 'parent',
update: function() {
updateHiddenField();
}
});
origSelect.on("select2:select", function (evt) {
var id = evt.params.data.id;
var element = $(this).children("option[value="+id+"]");
element.detach();
origSelect.append(element);
$(this).trigger("change");
updateHiddenField();
});
于 2019-08-15T02:55:30.510 回答