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


212

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

답변:


238

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

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

select2를 재설정하려면

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

7
<복수 선택> 으로이 작업을 시도했지만 오류가 발생합니다. <select> 요소에 연결된 경우 Select2에 옵션 'initSelection'이 허용되지 않습니다.
Sorin Postelnicu

15
이것은 나를 위해 작동하지 않습니다. 자리 표시자가 여전히 표시되지 않습니다.
bcr

5
Select2의 API에 따른 새로운 방법을 반영하는 아래 @Lego Stormtroopr의 답변을 참조하십시오. 위의 방법은 더 이상 사용되지 않습니다.
David

14
v4.0.3부터는 .select2("val", "")더 이상 작동 하지 않는 것 같습니다 .
adamj

31
$("#customers_select").val('').trigger('change') ;나는 이것을 사용했고 효과가 있었다.
Akshay Kulkarni

125

Select2가 API를 변경했습니다.

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

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

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

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

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

136
이렇게하면 값이 업데이트되지만 올바르게 표시 되려면 변경 이벤트를 트리거해야합니다. $('#your_select_input').val('').trigger('change')
Saneem

5
이것은 나를 위해 작동하지 않습니다. 자리 표시자가 여전히 표시되지 않습니다.
bcr

3
이것은 change트리거 추가 와 함께 작동 하지만 우리가 사용하는 유효성 검사 라이브러리도 트리거합니다. 이제 더 이상 사용되지 않는 버전을 사용해야합니다.
Dave Newton

6
select2 4.0.2를 사용하면 올바르게 작동하지 않습니다. 선택을 재설정하고 자리 표시자를 복원하지만 새 값 (포스트 재설정)을 선택하면 "빈 문자열"옵션 (예 : "x"만있는 상자)도 선택되어 있습니다.
kounoupis

1
$ ( '# your_select_input'). val ( ''). trigger ( 'change')는 자리 표시자가 제공 될 때만 작동합니다. 그렇지 않으면 빈 문자열 옵션이 선택된 옵션으로 표시됩니다.
amol

116

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

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

2
자리 표시자를 정의하지 않으면 allowClear가 작동하지 않습니다.
Dan Tappin

어느 쪽 $('#your_select_input').val('').trigger('change')$('#your_select_input').val('');파이어 폭스에서 작동하지 않습니다
알렉스 예술.

1
이것은 나를 위해 작동하며 v4.0.3을 사용하는 select2에서 모든 데이터를 삭제합니다.
ClearBoth

8
$ ( "# customers_select"). empty (). trigger ( 'change')는 저에게 효과적입니다. :)
Munna Khan

1
'$ ( "# customers_select"). empty (). trigger ('change ')'는 나를 위해 일했습니다. 감사합니다!
Tahirhan '12

52

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

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

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

참고

Select2 설명서에 따르면


2
v4.0.3도 사용하고 $('select2element').val("").trigger("change")있으며 잘 작동합니다.
Roubi

<select> 안에 빈 <option>이 있어야합니다. select2와 함께 ajax를 사용하는 경우 도움이 될 것입니다. $ ( '# selectFieldId'). prepend ( '<option selected = "selected"> </ option>')
musicjerm

20

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

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

1
이로 인해 select2 드롭 다운이 비워졌습니다. 나를 위해 일했다. 감사.
disha

18

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

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

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



11

선택한 값을 제거하려면

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

옵션 값을 지우려면

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

1
fefe가 자리 표시 자 텍스트를 재설정하도록 요청합니다. 따라서이 답변의 첫 부분 만 유효합니다.
nterms

2
그렇기 때문에 답변 제목을 강조 표시합니다.
Shanka SMS

2
첫 번째 대답은 실제로 4.0 이상에서 더 이상 적용되지 않습니다. 그러나 두 번째 옵션은 저를 구했습니다! 이것은 select2를 정말로 지우고 자 할 때의 해결책입니다. .val ( '')을 2로 선택하면 충분하지 않습니다. 또한 HTML을 지워야합니다. 고마워 !!!
wazza

9

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

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

또는

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

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


탁월한 솔루션. 새로 추가 된 select2 상자를 대상으로 .last () 함수를 추가해야했습니다. $('#select2-element').last().val('').trigger('change.select2');
InsParbo

8

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

8

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

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

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


6

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

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

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

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

6

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

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

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

반 솔루션


5

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

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

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

또는

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

5

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

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

나를 위해 일하지만 내 트리거는 '변화'였다
그레고리 R. Sudderth을

이것이 Ajax 데이터를 사용하여 다른 Select2에서 Select2를 재설정하는 유일한 솔루션이었습니다.
IlludiumPu36'8

5

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

$('.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([]);
 });

3

자리 표시 자

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

선택 2를 재설정하려면

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

도움이 되었기를 바랍니다


2

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

2

나는이 문제가되고 그것에서 유래 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을 실행 중입니다.


change이벤트에 리스너가 연결되어있는 것 같습니다 . change.select2바운드 리스너를 트리거하지 않는 트리거링을 시도 하십시오 ( github.com/select2/select2/issues/3620 참조 ).
Paul

2

v.4.0.x 기준

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

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

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

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

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


1

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

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

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

selector.find ( 'option : not (: first)'). html ( '');를 사용하는 경우 작동해야합니다.
wazza

1

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

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

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


1
이것은 내가 할 수있는 가장 간단한 방법이었습니다. 다른 방법은 저에게 효과적이지 않았습니다.
chevybow

1

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


1

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

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

0

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

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


0

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

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

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

0

내가 할 때마다

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

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

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

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

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


0

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

var selection = $("#DelegateId").data("select2").selection;
var evt = document.createEvent("UIEvents");
selection._handleClear(evt);
selection.trigger("toggle", {});
  • allowClear를 true로 설정해야합니다
  • select 요소에 빈 옵션이 있어야합니다.

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.