Как удалить выбранную опцию из списка опций в select2 multiselect и показать выбранные опции в том порядке, в котором они выбраны
У меня есть поле select2 multi select в моей форме, где я хочу удалить выбранную опцию из раскрывающегося списка после ее выбора и снова добавить ее в список, если она будет удалена из списка. А также добавленные элементы должны быть в том же порядке, в каком они выбраны. Текущий select2 (4.0) не удаляет выбранные элементы и показывает выбранные элементы в том порядке, в котором они отображаются в раскрывающемся списке, а не в том порядке, в котором они есть выбранный.
$(document).ready(function(){
$('#dynamicAttributes').select2({
allowClear: true,
minimumResultsForSearch: -1,
width: 600
});
});
JSFiddle: https://jsfiddle.net/rd62bhbm/
5 ответов
Часть №1 из Q:
можно сделать CSS трюк скрыть selected item такой:
.select2-results__option[aria-selected=true] {
display: none;
}
Часть #2 из Q:
также вы можете сделать в jQuery фокус в законную силу selected items до конца окно тегов (получив выбранный элемент на select, отсоедините его (удалите его), затем повторно установите его в поле тегов, затем вызовите "изменить функцию", чтобы применить изменения ):
$("select").on("select2:select", function (evt) {
var element = evt.params.data.element;
var $element = $(element);
$element.detach();
$(this).append($element);
$(this).trigger("change");
});
Наконец-То Обновляется!--30-->JsFiddle, Я надеюсь, что это работает для вас, Спасибо !
правка #1
вы можете Clear All Selected этой (применить значения Null):
$("#dynamicAttributes").val(null).trigger("change");
на кнопки:
$('#btnReset').click(function() {
$("#dynamicAttributes").val(null).trigger("change");
});
Я нахожу способ сделать выбранные значения больше не появляться в всплывающем списке выбора
в документации вы можете иметь список событий Select2 события
открыть
Я использую эти события select2, открытые, чтобы скрыть выбранные значения
вот javascript::
$(document).ready(function() {
$('#dynamicAttributes').select2({
allowClear: true,
minimumResultsForSearch: -1,
width: 600
});
// override the select2 open event
$('#dynamicAttributes').on('select2:open', function () {
// get values of selected option
var values = $(this).val();
// get the pop up selection
var pop_up_selection = $('.select2-results__options');
if (values != null ) {
// hide the selected values
pop_up_selection.find("li[aria-selected=true]").hide();
} else {
// show all the selection values
pop_up_selection.find("li[aria-selected=true]").show();
}
});
});
здесь демо
надеюсь, что это помогает.
мое решение было изменено select2.js (ядро, версия 4.0.3) в строке #3158. Добавить следующую проверку:
if ($option[0].selected == true) {
return;
}
С помощью этой проверки мы можем исключить из выпадающего списка выбранные. А если написать название выбранного варианта, то появится текст варианта "noResult".
вот полный код:
SelectAdapter.prototype.query = function (params, callback) {
var data = [];
var self = this;
var $options = this.$element.children();
$options.each(function () {
var $option = $(this);
if (!$option.is('option') && !$option.is('optgroup') ) {
return;
}
if ($option[0].selected == true) {
return;
}
var option = self.item($option);
var matches = self.matches(params, option);
if (matches !== null) {
data.push(matches);
}
});
callback({
results: data
});
};
$(document).ready(function(){
$('#dynamicAttributes').select2({
allowClear: true,
minimumResultsForSearch: -1,
width: 600
});
});
это делает ошибку, когда нажмите кнопку Удалить знак
ошибку TypeError: это.заполнитель не определен
использовать
$(document).ready(function(){
$('#dynamicAttributes').select2({
allowClear: true,
minimumResultsForSearch: -1,
width: 600,
placeholder: 'past your placeholder'
});