Ответ 1
Я бы попробовал что-то вроде этого:
$(function(){
$("#searchclear").click(function(){
$("#d").select2('val', 'All');
});
});
Каким будет лучший способ для reset выбранного элемента по умолчанию? Я использую библиотеку Select2, и при использовании обычной кнопки type="reset"
значение в раскрывающемся списке не reset.
Поэтому, когда я нажимаю свою кнопку, я хочу снова отобразить "Все".
JQuery
$("#d").select2();
HTML
<select id="d" name="d">
<option selected disabled>All</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Я бы попробовал что-то вроде этого:
$(function(){
$("#searchclear").click(function(){
$("#d").select2('val', 'All');
});
});
Вы также можете выбрать reset select2 с помощью
$(function() {
$('#d').select2('data', null)
})
поочередно вы можете передать 'allowClear': true
при вызове select2, и у него будет кнопка X до reset его значение.
В соответствии с последней версией (select2 3.4.5), зарегистрированной здесь, это будет так же просто, как:
$("#my_select").select2("val", "");
$('#d').val('').trigger('change');
Это правильное решение отныне в соответствии с устаревшим сообщением, брошенным в режиме отладки:
"Метод select2("val")
устарел и будет удален в более поздних версиях Select2. Вместо этого используйте $element.val()
вы можете использовать:
$("#d").val(null).trigger("change");
Это очень просто и работает правильно! Если используется кнопка reset:
$('#btnReset').click(function() {
$("#d").val(null).trigger("change");
});
Лучший способ сделать это:
$('#e1.select2-offscreen').empty(); //#e1 : select 2 ID
$('#e1').append(new Option()); // to add the placeholder and the allow clear
Я вижу три проблемы:
value
.Во-первых, я рекомендую использовать функцию setTimeout
для обеспечения выполнения кода после завершения формы reset.
Вы можете выполнить код при нажатии кнопки:
$('#searchclear').click(function() {
setTimeout(function() {
// Code goes here.
}, 0);
});
Или, когда форма reset:
$('form').on('reset', function() {
setTimeout(function() {
// Code goes here.
}, 0);
});
Как использовать код:
Так как опция "Все" отключена, форма reset не делает это выбранным значением. Поэтому вы должны явно указать его как выбранное значение. Способ сделать это с помощью функции Select2 "val". А поскольку параметр "Все" не имеет атрибута value
, его значение совпадает с его текстом, который является "Все" . Следовательно, вы должны использовать код, указанный thtsigma в выбранном ответе:
$("#d").select2('val', 'All');
Если атрибут value=""
должен быть добавлен к опции "Все" , вы можете использовать код Даниэля Денера:
$("#d").select2('val', '');
Если опция "Все" не была отключена, вам просто нужно принудительно обновить Select2, и в этом случае вы могли бы использовать:
$('#d').change();
Примечание. Следующий код Lenart - это способ очистить выбор, но он не вызывает выбор "Все" :
$('#d').select2('data', null)
Если у вас есть заполненный виджет выбора, например:
<select>
<option value="1">one</option>
<option value="2" selected="selected">two</option>
<option value="3">three</option>
...
вам нужно убедить select2 восстановить первоначально выбранное значение на reset, подобно тому, как работает родная форма. Для этого сначала создайте reset собственную форму, а затем обновите select2:
$('button[type="reset"]').click(function(event) {
// Make sure we reset the native form first
event.preventDefault();
$(this).closest('form').get(0).reset();
// And then update select2 to match
$('#d').select2('val', $('#d').find(':selected').val());
}
То, что я нашел, работает хорошо:
если у вас есть опция placeholder, например "All" или "-Select-", и ее первая опция и что вы хотите установить значение, когда вы "reset", вы можете использовать
$('#id').select2('val',0);
0 по существу является опцией, которую вы хотите установить на reset. Если вы хотите установить его на последнюю опцию, то получите длину опций и задайте ее длиной - 1. В основном используйте индекс любой опции, которую вы хотите установить для значения select2 на reset.
Если у вас нет заполнителя и вы просто хотите, чтобы в поле не отображался текст:
$('#id').select2('val','');
Чтобы достичь общего решения, почему бы не сделать это:
$(':reset').live('click', function(){
var $r = $(this);
setTimeout(function(){
$r.closest('form').find('.select2-offscreen').trigger('change');
}, 10);
});
Таким образом: Вам не нужно создавать новую логику для каждого select2 в вашем приложении.
И вам не нужно знать значение по умолчанию (которое, кстати, не обязательно должно быть ""
или даже первый вариант)
Наконец, установка значения :selected
не всегда приведет к истинному reset, так как текущий выбранный, возможно, был бы программно установлен на клиенте, тогда как действие по умолчанию form select
должно возвращать элемент ввода значения для отправленных сервером.
EDIT:
В качестве альтернативы, учитывая устаревший статус live
, мы могли бы заменить первую строку следующим:
$('form:has(:reset)').on('click', ':reset', function(){
или еще лучше:
$('form:has(:reset)').on('reset', function(){
PS: Я лично считаю, что сброс на reset, а также запуск событий blur
и focus
, связанных с исходным выбором, являются одними из наиболее заметных "недостающих" функций в select2!
Select2 использует определенный класс CSS, поэтому простой способ reset:
$('.select2-container').select2('val', '');
И у вас есть преимущество, если у вас есть несколько Select2 в одной и той же форме, все они будут сброшены с помощью этой единственной команды.
Иногда я хочу reset Select2, но не могу без метода change(). Итак, мое решение:
function resetSelect2Wrapper(el, value){
$(el).val(value);
$(el).select2({
minimumResultsForSearch: -1,
language: "fr"
});
}
Использование:
resetSelect2Wrapper("#mySelectId", "myValue");
Для меня это работает только с любым из этих решений
$(this).select2('val', null);
или
$(this).select2('val', '');