Как установить заполнитель на значение reset с помощью select2. В моем примере Если щелкнуть местоположения или поля выбора выбора, а мой select2 имеет значение, отличное от значения select2, должен reset и показать заполнитель по умолчанию. Этот script сбрасывает значение, но не отображает местозаполнитель
$("#locations, #grade ").change(function() {
$('#e6').select2('data', {
placeholder: "Studiengang wählen",
id: null,
text: ''
});
});
$("#e6").select2({
placeholder: "Studiengang wählen",
width: 'resolve',
id: function(e) {
return e.subject;
},
minimumInputLength: 2,
ajax: {
url: "index.php?option=com_unis&task=search.locator&tmpl=component&<?php echo JSession::getFormToken() ?>=1",
dataType: 'json',
data: function(term, page) {
return {
q: term, // search term
g: $('#grade option:selected').val(),
o: $('#locations option:selected').val()
};
},
results: function(data, page) {
return {
results: data
};
}
},
formatResult: subjectFormatResult,
formatSelection: subjectFormatSelection,
dropdownCssClass: "bigdrop",
escapeMarkup: function(m) {
return m;
}
});
Вы должны определить select2 как
$("#customers_select").select2({
placeholder: "Select a customer",
initSelection: function(element, callback) {
}
});
В reset select2
$("#customers_select").select2("val", "");
Select2 изменил свой API:
Select2: метод
select2("val")
устарел и будут удалены в более поздних версиях Select2. Вместо этого используйте $element.val().
Лучший способ сделать это сейчас:
$('#your_select_input').val('');
Изменить: декабрь 2016 г. Комментарии предполагают, что ниже приведен обновленный способ сделать это:
$('#your_select_input').val([]);
$('#your_select_input').val('').trigger('change')
Принятый ответ не работает в моем случае. Я пытаюсь это сделать, и он работает:
Определить select2:
$("#customers_select").select2({
placeholder: "Select a State",
allowClear: true
});
или
$("#customers_select").select2({
placeholder: "Select a State"
});
К reset:
$("#customers_select").val('').trigger('change')
или
$("#customers_select").empty().trigger('change')
$('#your_select_input').val('').trigger('change')
ни $('#your_select_input').val('');
не работает в Firefox
Единственное, что может работать на меня, это:
$('select2element').val(null).trigger("change")
Я использую версию 4.0.3
Ссылка
$('select2element').val("").trigger("change")
тоже работает нормально.
Используйте это:
$('.select').val([]).trigger('change');
Select2 использует определенный класс CSS, поэтому простой способ reset:
$('.select2-container').select2('val', '');
И у вас есть преимущество, если у вас есть несколько Select2 в одной и той же форме, все они будут сброшены с помощью этой единственной команды.
ИЗМЕНИТЬ ВЫБРАННОЕ ЗНАЧЕНИЕ
$('#employee_id').select2('val','');
ДЛЯ ОЧИСТКИ ВАРИАНТОВ ВАРИАНТОВ
$('#employee_id').html('');
Я знаю, что это старый вопрос, но это работает для select2 версии 4.0
$('#select2-element').val('').trigger('change');
или
$('#select2-element').val('').trigger('change.select2');
если у вас есть связанные с ним события изменения
$('#select2-element').last().val('').trigger('change.select2');
Во-первых, вы должны определить select2 следующим образом:
$('#id').select2({
placeholder: "Select groups...",
allowClear: true,
width: '100%',
})
В reset select2 просто вы можете использовать следующий блок кода:
$("#id > option").removeAttr("selected");
$("#id").trigger("change");
Это правильный путь:
$("#customers_select").val('').trigger('change');
Я использую последнюю версию Select2.
Вы можете очистить выбор te
$('#object').empty();
Но он не вернет вас обратно к вашему заполнителю.
Итак, его полурешение
Используйте следующую команду, чтобы настроить select2
$('#selectelementid').select2({
placeholder: "Please select an agent",
allowClear: true // This is for clear get the clear button if wanted
});
И очистить выбранный ввод программно
$("#selectelementid").val("").trigger("change");
$("#selectelementid").trigger("change");
Для пользователей, загружающих удаленные данные, this будет reset select2 в заполнитель без отключения ajax. Работает с v4.0.3:
$("#lstProducts").val("").trigger("change.select2");
У меня также была эта проблема, и это связано с val(null).trigger("change");
сбрасыванием ошибки No select2/compat/inputData
до того, как placeholder получит reset. Я решил это, поймав ошибку и установив заполнитель непосредственно (вместе с шириной).
Примечание. Если у вас более одного, вам нужно поймать каждый.
try{
$("#sel_item_ID").select2().val(null).trigger("change");
}catch(err){
console.debug(err)
}
try{
$("#sel_location_ID").select2().val(null).trigger("change");
}catch(err){
console.debug(err)
}
$('.select2-search__field')[0].placeholder='All Items';
$('.select2-search__field')[1].placeholder='All Locations';
$('.select2-search__field').width(173);
Я запускаю Select2 4.0.3
change
. Попробуйте запустить change.select2
- это не вызовет связанных слушателей (см. Github.com/select2/select2/issues/3620 ).
Следуя рекомендуемому способу его выполнения. Найдено в документации https://select2.github.io/options.html#my-first-option-is-being-displayed-instead-of-my-placeholder (это, по-видимому, довольно распространенная проблема):
Когда это происходит, это обычно означает, что у вас нет пустого <option></option>
в качестве первого параметра в <select>
.
как в:
<select>
<option></option>
<option value="foo">your option 1</option>
<option value="bar">your option 2</option>
<option value="etc">...</option>
</select>
Для местодержателя
$("#stateID").select2({
placeholder: "Select a State"
});
Для сброса выбора 2
$('#stateID').val('');
$('#stateID').trigger('change');
Надеюсь это поможет
по состоянию на v.4.0.x...
чтобы очистить значения, но также восстановить использование заполнителя...
.html('<option></option>'); // defaults to placeholder
если он пуст, вместо него будет выбран первый элемент опции, который может быть не таким, каким вы хотите
.html(''); // defaults to whatever item is first
откровенно... Select2 - такая боль в прикладе, это поражает меня, что он не был заменен.
Используя select2 version 3.2, это сработало для меня:
$('#select2').select2("data", "");
Не нужно было реализовывать initSelection
Я пробовал вышеупомянутые решения, но это не сработало для меня.
Это своего рода хак, где вам не нужно вызывать изменения.
$("select").select2('destroy').val("").select2();
или
$("select").each(function () { //added a each loop here
$(this).select2('destroy').val("").select2();
});
Я пробовал решения, но ни один из них не работал с версией 4x.
Чего я хочу достичь: очистить все параметры, но не прикасаться к заполнителю. Этот код работает для меня.
selector.find('option:not(:first)').remove().trigger('change');
$('#your_select_input').val('').trigger('change')
Я не знаю, сталкивался ли кто-нибудь еще с этим, но как только код нажал на триггер ("изменение"), мой javascript просто остановился, никогда не возвращался из триггера, а остальная часть функции никогда не выполнялась.
Я не достаточно знаком с триггером jquerys, чтобы сказать, что это не так. Я справился с этим, обернув его в setTimeout, безобразно, но эффективно.
Используйте этот код в свой файл JS
$('#id').val('1');
$('#id').trigger('change');
$('myselectdropdown').select2('val', '0')
где 0 - ваше первое значение раскрывающегося списка
Мое решение:
$el.off('select2:unselect')
$el.on('select2:unselect', function (event) {
var $option = $('<option value="" selected></option>');
var $selected = $(event.target);
$selected.find('option:selected')
.remove()
.end()
.append($option)
.trigger('change');
});
Попробовав первые 10 решений здесь и потерпив неудачу, я нашел это решение для работы (см. "nilov прокомментировал 7 апреля • отредактировал", комментарий на странице):
(function ($) {
$.fn.refreshDataSelect2 = function (data) {
this.select2('data', data);
// Update options
var $select = $(this[0]);
var options = data.map(function(item) {
return '<option value="' + item.id + '">' + item.text + '</option>';
});
$select.html(options.join('')).change();
};
})(jQuery);
Затем выполняется изменение:
var data = [{ id: 1, text: 'some value' }];
$('.js-some-field').refreshDataSelect2(data);
(Первоначально автор показал var $select = $(this[1]);
, который комментатор исправил до var $select = $(this[0]);
, который я покажу выше).
Один [очень] хакерский способ сделать это (я видел, что он работает для версии 4.0.3):
var selection = $("#DelegateId").data("select2").selection;
var evt = document.createEvent("UIEvents");
selection._handleClear(evt);
selection.trigger("toggle", {});
Хорошо, когда бы я ни делал
$('myselectdropdown').select2('val', '').trigger('change');
Я начал получать некоторую задержку после трех-четырех триггеров. Полагаю, есть утечка памяти. Это не в моем коде, потому что, если я удалю эту строку, мое приложение не будет свободно.
Так как у меня есть опции allowClear для true, я пошел с
$('.select2-selection__clear').trigger('mousedown');
За этим может следовать $('myselectdropdown'). select2 ('close'); event trigger на элементе select2 dom в случае, если вы хотите закрыть раскрытое предложение.
Интерфейс DOM уже отслеживает начальное состояние...
Итак, достаточно сделать следующее:
$("#reset").on("click", function () {
$('#my_select option').prop('selected', function() {
return this.defaultSelected;
});
});
Прежде чем очистить значение, используя этот $("#customers_select").select2("val", "");
Попробуйте настроить фокус на любой другой элемент управления на reset.
Это снова отобразит заполнитель.
Для reset значений и заполнителя я просто повторно инициализирую элемент select2:
$( "#select2element" ).select2({
placeholder: '---placeholder---',
allowClear: true,
minimumResultsForSearch: 5,
width:'100%'
});