재설정 버튼으로 드롭 다운에서 Select2 값 재설정

재설정 버튼으로 드롭 다운에서 Select2 값 재설정

---

선택한 항목을 기본값으로 재설정하는 가장 좋은 방법은 무엇입니까? 내가 사용하고 선택 2의 라이브러리 및 일반 버튼을 사용하는 경우 type="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');
    });
});

---

다음을 사용하여 select2 값을 재설정 할 수도 있습니다.

$(function() {
  $('#d').select2('data', null)
})

또는 'allowClear': trueselect2를 호출 할 때 전달할 수 있으며 값을 재설정하는 X 버튼이 있습니다.

---

버전 4.0

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

이것은 디버그 모드에서 던져진 더 이상 사용되지 않는 메시지에 따라 지금부터 올바른 솔루션입니다. "이 select2("val")메서드는 더 이상 사용되지 않으며 이후 Select2 버전에서 제거됩니다. $element.val()대신 사용"

---

여기 에 설명 된 최신 버전 (select2 3.4.5)에 따르면 다음과 같이 간단합니다.

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

---

다음을 사용할 수 있습니다.

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

매우 간단하고 올바르게 작동합니다! 리셋 버튼과 함께 사용하는 경우 :

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

---

세 가지 문제가 있습니다.

1. 양식 재설정으로 인해 값이 변경 될 때 Select2 컨트롤의 표시가 새로 고쳐지지 않습니다.
2. "모두"옵션에는 value속성 이 없습니다 .
3. "모두"옵션이 비활성화됩니다.

먼저 setTimeout양식 재설정이 완료된 후 코드가 실행되도록 함수를 사용하는 것이 좋습니다 .

버튼을 클릭하면 코드를 실행할 수 있습니다.

$('#searchclear').click(function() {
    setTimeout(function() {
        // Code goes here.
    }, 0);
});

또는 양식이 재설정 된 경우 :

$('form').on('reset', function() {
    setTimeout(function() {
        // Code goes here.
    }, 0);
});

사용할 코드는 다음과 같습니다.

"모두"옵션이 비활성화 되었기 때문에 양식 재설정은 선택한 값으로 만들지 않습니다. 따라서 선택한 값이되도록 명시 적으로 설정해야합니다. 그렇게하는 방법은 Select2 "val"함수를 사용하는 것입니다. 그리고 "All"옵션에는 value속성 이 없기 때문에 그 값은 "All"인 텍스트와 동일합니다. 따라서 선택한 답변에서 thtsigma에 의해 제공된 코드를 사용해야합니다.

$("#d").select2('val', 'All');

속성 value=""이 "All"옵션에 추가되는 경우 Daniel Dener가 제공 한 코드를 사용할 수 있습니다.

$("#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를 설득 할 수 있습니다. 이를 위해 먼저 기본 양식을 재설정 한 다음 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());
}

---

내가 찾은 것은 다음과 같습니다.

'All'또는 '-Select-'와 같은 자리 표시 자 옵션과 첫 번째 옵션이 있고 '재설정'할 때 값을 설정하려는 경우 사용할 수 있습니다.

$('#id').select2('val',0);

0은 기본적으로 재설정시 설정할 옵션입니다. 마지막 옵션으로 설정하려면 옵션의 길이를 가져 와서 길이를 설정하십시오.-1. 기본적으로 재설정시 select2 값을 설정하려는 옵션의 색인을 사용하십시오.

자리 표시자가없고 필드에 텍스트를 표시하지 않으려면 다음을 사용하십시오.

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

---

일반적인 솔루션을 얻으려면 다음을 수행하십시오.

$(':reset').live('click', function(){
    var $r = $(this);
    setTimeout(function(){ 
        $r.closest('form').find('.select2-offscreen').trigger('change'); 
    }, 10);
});

This way: You'll not have to make a new logic for each select2 on your application.

And, you don't have to know the default value (which, by the way, does not have to be "" or even the first option)

Finally, setting the value to :selected would not always achieve a true reset, since the current selected might well have been set programmatically on the client, whereas the default action of the form select is to return input element values to the server-sent ones.

EDIT: Alternatively, considering the deprecated status of live, we could replace the first line with this:

$('form:has(:reset)').on('click', ':reset', function(){

or better still:

$('form:has(:reset)').on('reset', function(){

PS: I personally feel that resetting on reset, as well as triggering blur and focus events attached to the original select, are some of the most conspicuous "missing" features in select2!

---

Select2 uses a specific CSS class, so an easy way to reset it is:

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

And you have the advantage of if you have multiple Select2 at the same form, all them will be reseted with this single command.

---

Sometimes I want to reset Select2 but I can't without change() method. So my solution is :

function resetSelect2Wrapper(el, value){
    $(el).val(value);
    $(el).select2({
        minimumResultsForSearch: -1,
        language: "fr"
    });
}

Using :

resetSelect2Wrapper("#mySelectId", "myValue");

---

For me it works only with any of these solutions

$(this).select2('val', null);

or

$(this).select2('val', '');

---

    // Store default values
    $('#filter_form [data-plugin="select2"]').each(function(i, el){
        $(el).data("seldefault", $(el).find(":selected").val());
        });

    // Reset button action
    $('#formresetbtn').on('click', function() {
        $('#filter_form [data-plugin="select2"]').each(function(i, el){
            $(el).val($(el).data("seldefault")).trigger('change');
            });
        });

참고URL : https://stackoverflow.com/questions/15205262/resetting-select2-value-in-dropdown-with-reset-button