使用Ajax选择2 4.0.0初始值

Question

我有一个从Ajax数组填充的select2 v4.0.0。如果我设置了select2的值，我可以通过javascript调试看到它选择了正确的项（在我的情况下为＃3），但是在选择框中未显示该值，它仍显示占位符。 

而我应该看到这样的东西： 

在我的表单字段中：

<input name="creditor_id" type="hidden" value="3">

<div class="form-group minimal form-gap-after">

    <span class="col-xs-3 control-label minimal">

        <label for="Creditor:">Creditor:</label>

    </span>

    <div class="col-xs-9">

        <div class="input-group col-xs-8 pull-left select2-bootstrap-prepend">

            <select class="creditor_select2 input-xlarge form-control minimal select2 col-xs-8">

                <option></option>

            </select>

        </div>

    </div>

</div>

我的JavaScript：

var initial_creditor_id = "3";

$(".creditor_select2").select2({

    ajax: {

       url: "/admin/api/transactions/creditorlist",

       dataType: 'json',

       delay: 250,

       data: function (params) {

           return {

                q: params.term,

                c_id: initial_creditor_id,

                page: params.page

           };

       },

       processResults: function (data, page) {

            return {

                results: data

            };

       },

       cache: true

   },

   placeholder: "Search for a Creditor",

   width: "element",

   theme: "bootstrap",

   allowClear: true

   }).on("select2:select", function (e) {

      var selected = e.params.data;

      if (typeof selected !== "undefined") {

           $("[name='creditor_id']").val(selected.creditor_id);

           $("#allocationsDiv").hide();

           $("[name='amount_cash']").val("");

           $("[name='amount_cheque']").val("");

           $("[name='amount_direct']").val("");

           $("[name='amount_creditcard']").val("");

        }

    }).on("select2:unselecting", function (e) {

        $("form").each(function () {

            this.reset()

        });

        ("#allocationsDiv").hide();

        $("[name='creditor_id']").val("");

    }).val(initial_creditor_id);

如何使选择框显示所选项目而不是占位符？是否应该将其作为AJAX JSON响应的一部分发送？

过去，Select2需要一个名为initSelection的选项，该选项在使用自定义数据源时就已定义，从而可以确定组件的初始选择。在v3.5中，这对我来说效果很好。

Answer 1

我还没有看到人们真正回答的一种情况是，当选项来自AJAX时，如何进行预选择，您可以选择多个。由于这是AJAX预选择的转到页面，因此我将在此处添加解决方案。$('#mySelect').select2({&nbsp; &nbsp; ajax: {&nbsp; &nbsp; &nbsp; &nbsp; url: endpoint,&nbsp; &nbsp; &nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; &nbsp; &nbsp; data: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { // Each of these gets processed by fnRenderResults.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: usersId,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: usersFullName,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; full_name: usersFullName,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; email: usersEmail,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; image_url: usersImageUrl,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selected: true // Causes the selection to actually get selected.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; processResults: function(data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; results: data.users,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pagination: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; more: data.next !== null&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; templateResult: fnRenderResults,&nbsp; &nbsp; templateSelection: fnRenderSelection, // Renders the result with my own style&nbsp; &nbsp; selectOnClose: true});&nbsp;