Select2 : 초기화 후 데이터를 설정하는 방법?

Question

select2 초기화 후 데이터 배열을 설정해야합니다. 그래서 내가 이런 걸 만들고 싶어 :

var select = $('#select').select2({}); 
select.data([ 
    {id: 1, text: 'value1'}, 
    {id: 1, text: 'value1'} 
]); 

을하지만, 나는 다음과 같은 오류가 발생합니다 :

Option 'data' is not allowed for Select2 when attached to a element.;

내 HTML :

나는 선택 요소 대신 사용해야 무엇

<select id="select" class="chzn-select"></select> 

?

나는 온로드에서 검색

Answer 1

에 대한 항목의 소스를 설정해야합니다

$.each(data, function(index, value) { 
    $('#selectId').append(
    '<option value="' + data[index].id + '">' + data[index].value1 + '</option>' 
); 
}); 

Answer 2

가 <input type="hidden"> 요소를 확인하고 그에게 선택 2를 결합한다. 일반 선택 상자에서 .select2를 사용하면 데이터를 재생할 수 없으며 대부분 UI 및 사후 선택 방법을 제공합니다.

출처 : 당신이 파괴하고 업데이트 된 데이터와 선택 2를 재구성해야합니다 V4를 들어 Select2 Documentation

Answer 3

. Check https://github.com/select2/select2/issues/2830

Answer 4

최근에 하나의 select2 객체를 변경하면 두 번째 (상위 - 하위 그룹화의 내용이 효과적으로 변경되는 시나리오가있었습니다. 나는 아약스 호출을 사용하여 새로운 Json 데이터 세트를 검색했다.이 데이터 세트는 두 번째 select2 객체에 의해 선택되었다. 나는 아래의 코드를 포함 시켰습니다 :

$("#group").on('change', function() { 
     var uri = "/Url/RetrieveNewResults"; 
     $.ajax({ 
      url: uri, 
      data: { 
       format: 'json', 
       Id: $("#group :selected").val() 
      }, 
      type: "POST", 
      success: function (data) { 
       $("#groupchild").html(''); 
       $("#groupchild").select2({ 
        data: data, 
        theme: 'bootstrap', 
        placeholder: "Select a Type" 
       }); 
      }, 
      error: function() { 
       console.log("Error") 
      } 
     }); 
    }); 

내가 두 번째 선택 2 데이터의 이전 설정을 취소하기 위해 $ ("#의 groupchild") HTML을 ('') 포함 남겼

. . 희망이 도움이됩니다.

Answer 5

출처 : https://select2.org/programmatic-control/add-select-clear-items

항목 추가 :

var data = { 
    id: 1, 
    text: 'Barn owl' 
}; 

var newOption = new Option(data.text, data.id, false, false); 
$('#mySelect2').append(newOption).trigger('change'); 

지우기 항목 :

$('#mySelect2').val(null).trigger('change');