select2 동적으로 항목 변경

select2 동적으로 항목 변경

---

두 개의 선택 항목이 연결되어 있습니다. 첫 번째 선택의 각 값은 두 번째 선택에 표시 될 항목을 결정합니다.

두 번째 선택의 값은 2 차원 배열에 저장됩니다.

[ [{"id":1,"text":"a"}, {"id":2,"text":"b"},...],
  [{"id":"1a","text":"aa"},{"id":"1b","text":"ba"},...],
  ...
]

첫 번째 선택 값은 두 번째 선택을 채우는 데 사용할 인덱스를 결정합니다. 따라서 첫 번째 '변경'이벤트에서 두 번째 항목에 포함 된 항목을 수정할 수 있어야합니다.

문서를 읽으려면 "데이터"옵션을 사용해야한다고 생각합니다.하지만 예제가 초기화시 배열 데이터를로드하는 방식을 확신하지 못하며 초기화 후 동일한 작업을 수행하려고하면 작동하지 않는 것 같습니다.

HTML

Attribute:
<select name="attribute" id="attribute">
    <option value="0">Color</option>
    <option value="1">Size</option>
</select>

Value:
<select name="value" id="value"></select>

<script>
   var data = [ [{"id":1,"text":"black"}, {"id":2,"text":"blue"},...],
                [{"id":"1","text":"9"},{"id":"1","text":"10"},...],
              ];
   $('#attribute').select2().bind('change', function(){
      // Here I need to change `#value` items.
      $('#value').select2('data',data[$(this).val()]);  // This does not work
   );

   $('#value').select2();
</script>

---

나는 이것이 어떻게 이루어질 수 있는지 보여주는 당신을 위해 예를 만들었습니다.

js뿐만 아니라 #value를 입력 요소로 변경했습니다.

<input id="value" type="hidden" style="width:300px"/>

change초기 값을 얻기 위해 이벤트를 트리거하고 있습니다.

$('#attribute').select2().on('change', function() {
    $('#value').select2({data:data[$(this).val()]});
}).trigger('change');

코드 예

편집하다:

현재 버전의 select2에서 클래스 속성은 숨겨진 입력에서 select2에 의해 생성 된 루트 요소로 전송되고 있으며, 심지어 select2-offscreen페이지 제한을 벗어나는 클래스 도 마찬가지 입니다.

이 문제를 해결하기 위해 필요한 것은 removeClass('select2-offscreen')동일한 요소에 두 번째로 select2를 적용하기 전에 추가 하는 것입니다.

$('#attribute').select2().on('change', function() {
    $('#value').removeClass('select2-offscreen').select2({data:data[$(this).val()]});
}).trigger('change');

이 문제를 해결하기 위해 새 코드 예제 를 추가했습니다 .

---

다음을 사용하여 옵션을 동적으로 업데이트하고 있습니다.

$control.select2('destroy').empty().select2({data: [{id: 1, text: 'new text'}]});

---

이를 위해 트리거 속성을 사용해보십시오.

$('select').select2().trigger('change');

---

여기에서 예제 라이브러리 부족을 수정합니다.

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js">

http://jsfiddle.net/bbAU9/328/

---

For v4 this is a known issue that won't be addressed in 4.0 but there is a workaround. Check https://github.com/select2/select2/issues/2830

---

In my project I use following code:

$('#attribute').select2();
$('#attribute').bind('change', function(){
    var $options = $();
    for (var i in data) {
        $options = $options.add(
            $('<option>').attr('value', data[i].id).html(data[i].text)
        );
    }
    $('#value').html($options).trigger('change');
});

Try to comment out the select2 part. The rest of the code will still work.

참고URL : https://stackoverflow.com/questions/13268083/select2-changing-items-dynamically