선택 2 값을 재설정하고 자리 표시자 표시

선택 2 값을 재설정하고 자리 표시자 표시

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

선택2를 재설정하려면

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

저의 경우에는 수락된 답변이 통하지 않습니다.시도해 봤는데, 효과가 있었습니다.

선택 2를 정의합니다.

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

Select2가 API를 변경했습니다.

선택2:그select2("val")메서드가 더 이상 사용되지 않으며 이후 Select2 버전에서 제거될 예정입니다.대신 $element.val()을 사용합니다.

이를 위한 최선의 방법은 다음과 같습니다.

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

편집: 2016년 12월 의견에 따르면 다음은 업데이트된 방법입니다.

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

제게 도움이 될 수 있는 유일한 것은:

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

이것이 오래된 질문이라는 것을 알지만, 이것은 select2 버전 4.0에 적용됩니다.

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

또는

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

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

선택한 값을 제거하려면

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

---

옵션 값 지우기

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

올바른 방법은 다음과 같습니다.

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

저는 Select2의 최신 버전을 사용하고 있습니다.

위의 해결책들을 시도해 보았지만 저에게는 효과가 없었습니다.

이것은 일종의 해킹입니다. 변화를 유발할 필요가 없습니다.

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

또는

$("select").each(function () { //added a each loop here
        $(this).select2('destroy').val("").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");

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

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

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

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

다음을 통해 선택 항목을 지울 수 있습니다.

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

하지만 자리 표시자로 되돌아가지는 않습니다.

그래서 반쪽짜리 해결책입니다.

원격 데이터를 로드하는 사용자의 경우 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);

선택 24.0.3을 실행 중입니다.

V.4.0.x 기준...

값을 삭제하고 자리 표시자 사용을 복원합니다.

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

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

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

솔직히...선택2는 정말 골치 아픈 물건인데, 교체하지 않은 것이 놀랍습니다.

여기서 처음 10가지 솔루션을 시도했다가 실패한 후 이 솔루션이 작동한다는 것을 알게 되었습니다(페이지 아래 "nilov commented on Apr 7" • edited" 주석 참조).

(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]);한 것을 것한정정가자논평것▁a▁which▁to한정er.var $select = $(this[0]);위에 보여드린 것과 같습니다.)

이 코드를 js 파일에 사용합니다.

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

select2 웹사이트에서,

$("#mySelect2ControlId").val(null).trigger("change");

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

이렇게 하면 값이 제거되고 저에게 가장 중요합니다. 또한 빈 x 버튼도 제거됩니다.

그럴 때마다

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

저는 3~4번의 트리거 후에 약간의 지연이 생기기 시작했습니다.메모리 누수가 있는 것 같습니다.이 라인을 제거하면 앱이 지연되지 않기 때문에 코드 내에 없습니다.

clear 옵션을 true로 설정했기 때문에 다음과 같이 했습니다.

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

다음에는 $('myselect' 드롭다운)가 올 수 있습니다.select2dom close'; 열린 제안 드롭다운을 닫으려는 경우 select2dom 요소에 대한 이벤트 트리거.

위의 솔루션을 시도해 보았지만 버전 4x에서 작동하는 솔루션은 없었습니다.

제가 달성하고자 하는 것은 모든 옵션을 지우지만 자리 표시자는 건드리지 않는 것입니다.이 코드는 저에게 효과가 있습니다.

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

Select2 버전 3.2를 사용하면 다음과 같은 이점이 있습니다.

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

가 없었습니다initSelection

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

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

예를 들어 모달을 닫을 때 모든 select2 입력을 지우려면 클래스 "select2"를 추가하고 모든 입력을 자리 표시자로 다시 설정할 수 있습니다.

$('#myModal').on('hidden.bs.modal', function (e) {
    $(this)
        .find(".select2").select2({placeholder: "Choose an option"})
        .val('').trigger('change.select2');
});

한 번에 재설정하는 이 방법은 양식에도 사용할 수 있습니다.이 버전은 4.0.10입니다.

이 솔루션은 저에게 적합합니다(24.0.13 선택).

$('#select').on("select2:unselecting", function (e) {
   $(this).val('').trigger('change');
   e.preventDefault();
});

언급URL : https://stackoverflow.com/questions/17957040/reset-select2-value-and-show-placeholder