Ajax를 사용하여 Select2를 사용하여 로드 시 초기 값 설정

Ajax를 사용하여 Select2를 사용하여 로드 시 초기 값 설정

Ajax에서 2개의 컨트롤을 설정했습니다(싱글과 다중 모두 사용).페이지 로드에 대한 값을 설정하려고 하는데 이 값을 사용할 수 없습니다.select2의 코드는 다음과 같습니다.

function AjaxCombo(element, url, multival ){  // multival = true or false
  multival = multival || false;
  $(element).select2({
   minimumInputLength: 2,
   multiple: multival,
   separator: '|',
   ajax: {
     url: url,
     dataType: 'json',
     data: function (term, page) {
        var targetname = $(this).attr('name');
        var target = targetname.slice(targetname.indexOf("[")+1, targetname.indexOf("]"));
       return {
         targettype: "search",
         target: target,
         search: term
       };
     },
     results: function (data, page) {
       return { results: data };
     }
   }
 });
}
AjaxCombo(".ajaxselect", "includes/linkedcontrol.php", false);
AjaxCombo(".ajaxmultiselect", "includes/linkedcontrol.php", true);

Ajax 콤보는 정상적으로 동작하며, 초기값만 로드해도 문제가 있습니다.아래 코드를 시도했지만 작동하지 않았습니다.

initSelection : function (element, callback) {
    var elementText = $(element).attr('data-initvalue');
    callback(elementText);
}

php의 HTML은 다음과 같이 반환됩니다.

<input name='header[country]' class='ajaxselect'  data-initvalue='[{"id":"IN","name":"India"}]' data-placeholder='Select Country' value='' />

값이 php에서 입력된 것을 알 수 있습니다.제 jquery에만 문제가 있습니다.컨트롤에 대한 내 값은 다음과 같이 표시됩니다.US | United States of America포맷 옵션을 사용하지 않고 이 포맷을 디폴트로 취득할 수 있도록 select2 소스를 편집했습니다.

기본값을 입력하는 데 도움을 주실 수 있나요?잘 부탁드립니다.

편집: 이 질문은 Select2 버전 4.0에 관한 것입니다.이 옵션은 v4.0에서 제거되었으며 현재는 훨씬 단순해졌습니다.

이게 너한테 맞을지도 몰라!!난 이거면 되는데...

initSelection: function (element, callback) {

            callback({ id: 1, text: 'Text' });
}

코드의 철자가 올바른지 확인합니다.제 문제는initSelection, 나는 가지고 있었다.initselection

새 버전으로 업데이트됨:

http://jsfiddle.net/EE9RG/430/에서 이 솔루션을 사용해 보십시오.

$('#sel2').select2({
multiple:true,
ajax:{}}).select2({"data": 
     [{"id":"2127","text":"Henry Ford"},{"id":"2199","text":"Tom Phillips"}]});

Ravi, 4.0.1-rc.1의 경우:

1. 모두 추가<option>내부 요소<select>.
2. 불러$element.val(yourarray).trigger("change");끝나고select2init 함수

HTML:

<select name="Tags" id="Tags" class="form-control input-lg select2" multiple="multiple">
       <option value="1">tag 1</option>
       <option value="2">tag 2</option>
       <option value="3">tag 3</option>
 </select>

JS:

var $tagsControl = $("#Tags").select2({
        ajax: {
            url: '/Tags/Search',
            dataType: 'json',
            delay: 250,
            results: function (data) {
                return {
                    results: $.map(data, function (item) {
                        return {
                            text: item.text,
                            id: item.id
                        }
                    })
                };
            },
            cache: false
        },
        minimumInputLength: 2,
        maximumSelectionLength: 6
    });

    var data = [];
    var tags = $("#Tags option").each(function () {
        data.push($(this).val());
    });
    $tagsControl.val(data).trigger("change");

이 문제는 보고되었지만 아직 해결되지 않았다.https://github.com/select2/select2/issues/3116#issuecomment-146568753

데이터를 전달하기 위한 매우 이상한 방법입니다.서버에서 JSON 문자열/오브젝트를 가져와 값 등을 할당하는 것이 좋습니다.

아무튼 이렇게 하면var elementText = $(element).attr('data-initvalue');이거 받아.[{"id":"IN","name":"India"}]그 결과 id("IN") 및 name("India")의 실제 값을 얻을 수 있도록 위의 제안과 같이 해석해야 합니다.멀티 셀렉트와 싱글 값 선택 2의 2가지 시나리오가 있습니다.

단일 값:

$(element).select2({
    initSelection : function (element, callback) {
        var data = {id: "IN", text: "INDIA"};
        callback(data);
    }//Then the rest of your configurations (e.g.: ajax, allowClear, etc.)
});

멀티 셀렉트

$("#tags").select2({
    initSelection : function (element, callback) {
        var countryId = "IN"; //Your values that somehow you parsed them
        var countryText = "INDIA";

        var data = [];//Array

        data.push({id: countryId, text: countryText});//Push values to data array


        callback(data); //Fill'em
    }
});

자, 여기 요령이 있다! belov91이 제안했듯이, 이걸 꼭...

$(element).select2("val", []);

단일값 또는 다중값 Select 2인 경우에도 마찬가지입니다.한편 Select2 ajax 함수는 에 할당할 수 없습니다.<select>태그는 반드시<input>.

그게 도움이 됐으면 좋겠다.

안녕.

지정한 함수initSelection첫 번째와 함께 호출됩니다.value의론으로서그래서 만약에value이 비어 있으면 함수는 호출되지 않습니다.
지정 시value='[{"id":"IN","name":"India"}]'대신data-initvalue이치노

추가했습니다.

initSelection: function (element, callback) {

      callback({ id: 1, text: 'Text' });
}

하지만 또한

.select2('val', []);

마지막에.

이것으로 내 문제는 해결되었다.

var elem = $("#container").find("[name=elemMutliOption]");
for (var i = 0; i < arrDynamicList.length; i++)
{
   elem.find("option[value=" + arrDynamicList[i] + "]").attr("selected", "selected");
}
elem.select2().trigger("change");

이것은 페이지의 여러 섹션에 대해 동일한 보기를 사용하는 사용자에게 사용할 수 있으며, 페이지의 기본값을 자동 설정할 때와 동일한 방식으로 작동하거나 편집 페이지를 사용하는 것이 좋습니다.

"FOR"은 기존 옵션이 이미 DOM에 로드된 어레이를 통과합니다.

페이지 로드 후 값 변경

$('#data').val('').change();

이 답변들은 꽤 구식이다.경우에 따라서는 동작하는 경우도 있습니다만, 이것은 설명서에 기재되어 있습니다.https://select2.org/programmatic-control/add-select-clear-items#preselecting-options-in-an-remotely-sourced-ajax-select2

기본적으로 선택한 옵션을 만들고 추가해야 합니다.

// Set up the Select2 control
$('#mySelect2').select2({
    ajax: {
        url: '/api/students'
    }
});

// Fetch the preselected item, and add to the control
var studentSelect = $('#mySelect2');
$.ajax({
    type: 'GET',
    url: '/api/students/s/' + studentId
}).then(function (data) {
    // create the option and append to Select2
    var option = new Option(data.full_name, data.id, true, true);
    studentSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    studentSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});

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

$(element).select2("data",[ { id: result.id, text: "جابر احمد الصباح" },
    { id: 2, text: "خليل محمد خليل" }]);

제 경우 출력 렌더링에 문제가 있었습니다.그래서 아직 Ajax 데이터가 없는 경우 기본 텍스트를 사용했습니다.

  templateSelection: function(data) {
    return data.name || data.element.innerText;
  }

늦었습니다:(하지만 이것으로 문제가 해결될 것 같습니다.

 $("#controlId").val(SampleData [0].id).trigger("change");

데이터 바인딩 후

 $("#controlId").select2({
        placeholder:"Select somthing",
        data: SampleData // data from ajax controll
    });
    $("#controlId").val(SampleData[0].id).trigger("change");

언급URL : https://stackoverflow.com/questions/18699641/setting-initial-values-on-load-with-select2-with-ajax