Đặt lại giá trị select2 và hiển thị giữ chỗ

Làm cách nào để đặt trình giữ chỗ trên giá trị được đặt lại bằng select2. Trong ví dụ của tôi Nếu các vị trí hoặc hộp chọn lớp được nhấp và select2 của tôi có giá trị hơn giá trị của select2 sẽ đặt lại và hiển thị trình giữ chỗ mặc định. Kịch bản này đang đặt lại giá trị nhưng sẽ không hiển thị trình giữ chỗ

$("#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;
   }
});

Bạn phải xác định select2 là

$("#customers_select").select2({
    placeholder: "Select a customer",
    initSelection: function(element, callback) {                   
    }
});

Để đặt lại select2

$("#customers_select").select2("val", "");

Select2 đã thay đổi API của họ:

Chọn 2: select2("val")Phương thức đã không được chấp nhận và sẽ bị xóa trong các phiên bản Chọn2 sau. Sử dụng $ Element.val () thay thế.

Cách tốt nhất để làm điều này bây giờ là:

$('#your_select_input').val('');

Chỉnh sửa: Tháng 12 năm 2016 Nhận xét cho thấy bên dưới là cách cập nhật để thực hiện việc này:

$('#your_select_input').val([]);

Câu trả lời được chấp nhận không hoạt động trong trường hợp của tôi. Tôi đang thử cái này và nó đang hoạt động:

Xác định select2:

$("#customers_select").select2({
    placeholder: "Select a State",
    allowClear: true
});

hoặc là

$("#customers_select").select2({
    placeholder: "Select a State"
});

Để thiết lập lại:

$("#customers_select").val('').trigger('change')

hoặc là

$("#customers_select").empty().trigger('change')

Điều duy nhất có thể làm việc cho tôi là:

$('select2element').val(null).trigger("change")

Tôi đang sử dụng phiên bản 4.0.3

Tài liệu tham khảo

Theo Tài liệu Chọn2

Với Select2 phiên bản 4.0.9, điều này hoạt động với tôi:

$( "#myselect2" ).val('').trigger('change');

Select2 sử dụng một lớp CSS cụ thể, vì vậy một cách dễ dàng để đặt lại nó là:

$('.select2-container').select2('val', '');

Và bạn có lợi thế nếu bạn có nhiều Select2 ở cùng một hình thức, tất cả chúng sẽ được đặt lại bằng lệnh đơn này.

Dùng cái này :

$('.select').val([]).trigger('change');

ĐỂ XÓA giá trị đã chọn

$('#employee_id').select2('val','');

ĐỂ XÓA GIÁ TRỊ TÙY CHỌN

$('#employee_id').html('');

Tôi biết đây là một câu hỏi cũ, nhưng nó hoạt động cho phiên bản select2 4.0

 $('#select2-element').val('').trigger('change');

hoặc là

$('#select2-element').val('').trigger('change.select2'); 

nếu bạn có sự kiện thay đổi ràng buộc với nó

Sử dụng theo sau để cấu hình select2

    $('#selectelementid').select2({
        placeholder: "Please select an agent",
        allowClear: true // This is for clear get the clear button if wanted 
    });

Và để xóa lựa chọn đầu vào theo chương trình

    $("#selectelementid").val("").trigger("change");
    $("#selectelementid").trigger("change");

Đây là cách chính xác:

 $("#customers_select").val('').trigger('change');

Tôi đang sử dụng bản phát hành mới nhất của Select2.

Trước tiên, bạn phải xác định select2 như thế này:

$('#id').select2({
    placeholder: "Select groups...",
    allowClear: true,
    width: '100%',
})

Để đặt lại select2, đơn giản là bạn có thể sử dụng khối mã sau:

$("#id > option").removeAttr("selected");
$("#id").trigger("change");

Bạn có thể xóa lựa chọn bằng cách

$('#object').empty();

Nhưng nó sẽ không biến bạn trở lại chỗ giữ chỗ của bạn.

Vì vậy, nó là một giải pháp một nửa

Tôi đã thử các giải pháp trên nhưng nó không hiệu quả với tôi.

Đây là loại hack, nơi bạn không phải kích hoạt thay đổi.

$("select").select2('destroy').val("").select2();

hoặc là

$("select").each(function () { //added a each loop here
        $(this).select2('destroy').val("").select2();
});

Đối với người dùng đang tải dữ liệu từ xa, điều này sẽ đặt lại select2 thành trình giữ chỗ mà không bắn ra ajax. Hoạt động với v4.0.3:

$("#lstProducts").val("").trigger("change.select2");

Vì vậy, để thiết lập lại hình thức, một số bạn sẽ có nút đặt lại. Thêm mã sau vào thẻ script

$('.your_btn_class').click(function(){
    $('#select_field_id').val([]);
    $("#select_field_id").select2({
    placeholder: "this is a placeholder",
    });
});

Hoặc chỉ để trống trường chọn mà không giữ một trình giữ chỗ:

$('.your_btn_class').click(function(){
    $('#select_field_id').val([]);
 });

Đối với người giữ chỗ

$("#stateID").select2({
    placeholder: "Select a State"
});

Để thiết lập lại chọn 2

$('#stateID').val('');
$('#stateID').trigger('change');

Hi vọng điêu nay co ich

Theo cách được đề nghị làm điều đó. Tìm thấy trong tài liệu https://select2.github.io/options.html#my-first-option-is-being-displayed-instead-of-my-placeholder (đây có vẻ là một vấn đề khá phổ biến):

Khi điều này xảy ra, điều đó thường có nghĩa là bạn không có khoảng trống <option></option>làm tùy chọn đầu tiên trong <select>.

như trong:

<select>
   <option></option>
   <option value="foo">your option 1</option>
   <option value="bar">your option 2</option>
   <option value="etc">...</option>
</select>

Tôi cũng gặp vấn đề này và nó bắt nguồn từ val(null).trigger("change");việc ném No select2/compat/inputDatalỗi trước khi giữ chỗ được đặt lại. Tôi đã giải quyết nó bằng cách bắt lỗi và đặt trình giữ chỗ trực tiếp (cùng với chiều rộng). Lưu ý: Nếu bạn có nhiều hơn một, bạn sẽ cần phải bắt từng người.

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);

Tôi đang chạy Chọn2 4.0.3

kể từ v.4.0.x ...

để xóa các giá trị, nhưng cũng khôi phục sử dụng trình giữ chỗ ...

.html('<option></option>');  // defaults to placeholder

nếu nó trống, nó sẽ chọn mục tùy chọn đầu tiên thay vào đó có thể không phải là thứ bạn muốn

.html(''); // defaults to whatever item is first

thẳng thắn ... Chọn2 là một nỗi đau ở mông, điều đó làm tôi ngạc nhiên vì nó đã không được thay thế.

Tôi đã thử các giải pháp trên nhưng không có giải pháp nào hoạt động với phiên bản 4x.

Những gì tôi muốn đạt được là: xóa tất cả các tùy chọn nhưng không chạm vào trình giữ chỗ. Mã này làm việc cho tôi.

selector.find('option:not(:first)').remove().trigger('change');

Sử dụng select2 phiên bản 3.2, điều này làm việc cho tôi:

$('#select2').select2("data", "");

Không cần thực hiện initSelection

Sau khi thử 10 giải pháp đầu tiên ở đây và thất bại, tôi thấy giải pháp này hoạt động (xem "nilov đã nhận xét vào ngày 7 tháng 4 • đã chỉnh sửa" bình luận xuống trang):

(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);

Thay đổi được thực hiện:

var data = [{ id: 1, text: 'some value' }];
$('.js-some-field').refreshDataSelect2(data);

(Tác giả ban đầu cho thấy var $select = $(this[1]);, mà một bình luận đã sửa var $select = $(this[0]);, mà tôi hiển thị ở trên.)

Sử dụng mã này vào tập tin js của bạn

$('#id').val('1');
$('#id').trigger('change');

Trước khi bạn xóa giá trị bằng cách sử dụng này $("#customers_select").select2("val", ""); hãy đặt tiêu điểm này vào bất kỳ điều khiển nào khác khi nhấp vào đặt lại.

Điều này sẽ hiển thị giữ chỗ một lần nữa.

Giao diện DOM, đã theo dõi trạng thái ban đầu ...

Vì vậy, làm như sau là đủ:

$("#reset").on("click", function () {
    $('#my_select option').prop('selected', function() {
        return this.defaultSelected;
    });
});

Vâng bất cứ khi nào tôi làm

$('myselectdropdown').select2('val', '').trigger('change');

Tôi bắt đầu nhận được một số độ trễ sau ba đến bốn kích hoạt. Tôi cho rằng có một rò rỉ bộ nhớ. Nó không nằm trong mã của tôi bởi vì nếu tôi loại bỏ dòng này, ứng dụng của tôi không bị lag.

Vì tôi có các tùy chọn allowClear được đặt thành true, tôi đã sử dụng

$('.select2-selection__clear').trigger('mousedown');

Điều này có thể được theo sau bởi $ ('myselectdropdown'). Select2 ('close'); kích hoạt sự kiện trên phần tử dom2 trong trường hợp bạn muốn đóng đề xuất mở xuống.

Một cách rất hay để làm điều đó (tôi thấy nó hoạt động cho phiên bản 4.0.3):

var selection = $("#DelegateId").data("select2").selection;
var evt = document.createEvent("UIEvents");
selection._handleClear(evt);
selection.trigger("toggle", {});

• allowClear phải được đặt thành true
• một tùy chọn trống phải tồn tại trong phần tử chọn

Giải pháp của tôi là:

$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');
    });

$('myselectdropdown').select2('val', '0')

Trong đó 0 là giá trị đầu tiên của bạn trong danh sách thả xuống