select2 값을 재설정하고 자리 표시 자 표시

select2로 자리 표시자를 값 재설정시 설정하는 방법 내 예제에서 위치 또는 등급 선택 상자를 클릭하고 select2의 값이 select2의 값보다 큰 경우 기본 자리 표시자를 재설정하고 표시해야합니다. 이 스크립트는 값을 재설정하지만 자리 표시자를 표시하지 않습니다

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

select2를 재설정하려면

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

Select2가 API를 변경했습니다.

Select2 :이 select2("val")방법은 더 이상 사용되지 않으며 추후 Select2 버전에서 제거됩니다. 대신 $ element.val ()을 사용하십시오.

지금이 작업을 수행하는 가장 좋은 방법은 다음과 같습니다.

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

편집 : 2016 년 12 월 의견은 아래가 업데이트 된 방법임을 제안합니다.

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

제 경우에는 허용 된 답변이 작동하지 않습니다. 나는 이것을 시도하고 있으며 효과가있다.

select2를 정의하십시오.

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

또는

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

재설정하려면

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

또는

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

나를 위해 일할 수있는 유일한 것은 :

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

버전 4.0.3을 사용하고 있습니다.

참고

Select2 설명서에 따르면

Select2 버전 4.0.9에서는 다음과 같이 작동합니다.

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

Select2는 특정 CSS 클래스를 사용하므로이를 재설정하는 쉬운 방법은 다음과 같습니다.

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

또한 동일한 형식으로 여러 Select2가있는 경우이 단일 명령으로 모두 재설정됩니다.

이것을 사용하십시오 :

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

선택한 값을 제거하려면

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

옵션 값을 지우려면

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

나는 이것이 오래된 질문이라는 것을 알고 있지만 이것은 select2 버전 4.0에서 작동합니다.

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

또는

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

변경 이벤트가 바인딩 된 경우

다음을 사용하여 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");

이것은 올바른 방법입니다.

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

최신 릴리스의 Select2를 사용하고 있습니다.

먼저 다음과 같이 select2를 정의해야합니다.

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

select2를 재설정하려면 다음 코드 블록을 사용하면됩니다.

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

당신은에 의해 선택을 취소 할 수 있습니다

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

그러나 자리 표시 자로 돌아 가지 않습니다.

반 솔루션

위의 솔루션을 시도했지만 효과가 없었습니다.

이것은 일종의 해킹이며 변경을 트리거 할 필요가 없습니다.

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

또는

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

원격 데이터를로드하는 사용자의 경우 이것은 ajax를 발생시키지 않고 select2를 플레이스 홀더로 재설정합니다. v4.0.3에서 작동 :

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

따라서 양식을 재설정하려면 일부 사용자에게 재설정 버튼이 있습니다. 스크립트 태그 안에 다음 코드를 추가하십시오

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

또는 자리 표시자를 유지하지 않고 선택 필드를 비우려면 다음을 수행하십시오.

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

자리 표시 자

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

선택 2를 재설정하려면

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

도움이 되었기를 바랍니다

권장되는 방법을 따르 십시오. 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>

나는이 문제가되고 그것에서 유래 val(null).trigger("change");던지는 No select2/compat/inputData플레이스 홀더가 재설정지기 전에 오류가 발생했습니다. 오류를 포착하고 자리 표시자를 직접 (너비와 함께) 설정하여 해결했습니다. 참고 : 둘 이상인 경우 각각을 잡아야합니다.

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을 실행 중입니다.

v.4.0.x 기준

값을 취소하되 이에 도 자리 표시 자 사용을 복원 ...

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

비어 있으면 첫 번째 옵션 항목을 대신 선택하고 원하는 항목이 아닐 수 있습니다

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

솔직히 ... Select2는 엉덩이에 너무 고통스럽고 교체되지 않은 것에 놀랐습니다.

위의 솔루션을 시도했지만 버전 4x에서는 작동하지 않았습니다.

내가 달성하고자하는 것은 모든 옵션을 지우고 자리 표시자를 만지지 마십시오. 이 코드는 저에게 효과적입니다.

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

select2 버전 3.2를 사용하면 이것이 나를 위해 일했습니다.

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

구현할 필요가 없었습니다 initSelection

여기 처음 10 개 솔루션을 시도하고 실패 후, 나는 발견 이 (페이지 아래로 "4월 7일에 댓글을 Nilov입니다 • 편집"설명을 참조) 작업에 대한 솔루션을 :

(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]);내가 위에서 보여하는.)

이 코드를 js 파일에 사용하십시오.

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

이 $("#customers_select").select2("val", ""); 설정을 사용하여 값을 지우기 전에 재설정 클릭시 다른 컨트롤에 초점을 맞 춥니 다.

플레이스 홀더가 다시 표시됩니다.

DOM 인터페이스는 이미 초기 상태를 추적합니다 ...

따라서 다음을 수행하면 충분합니다.

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

내가 할 때마다

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

3-4 개의 트리거 후에 약간의 지연이 발생하기 시작했습니다. 메모리 누수가 있다고 가정합니다. 이 줄을 제거하면 내 앱에 지연이 없으므로 코드 내에 없습니다.

allowClear 옵션을 true로 설정 했으므로

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

이 뒤에 $ ( 'myselectdropdown'). select2 ( 'close'); 공개 제안 드롭 다운을 닫으려는 경우 select2 dom 요소에 대한 이벤트 트리거.

그것을 수행하는 하나의 [매우] 해킹 된 방법 (버전 4.0.3에서 작동하는 것을 보았습니다) :

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

• allowClear를 true로 설정해야합니다
• select 요소에 빈 옵션이 있어야합니다.

내 해결책은 다음과 같습니다.

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

여기서 0은 드롭 다운의 첫 번째 값입니다.