Ich habe ein select2 v4.0.0, das aus einem Ajax-Array ausgefüllt wird. Wenn ich den Wert von select2 einstelle, kann ich über das Javascript-Debugging feststellen, dass das richtige Element ausgewählt wurde (in meinem Fall # 3). Dies wird jedoch nicht im Auswahlfeld angezeigt, sondern es wird immer noch der Platzhalter angezeigt.

Warum sollte ich so etwas sehen:

In meinen Formularfeldern:

<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>

Mein 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);

Wie kann ich das Auswahlfeld so einstellen, dass das ausgewählte Element anstelle des Platzhalters angezeigt wird? Sollte ich dies möglicherweise als Teil der AJAX JSON-Antwort senden?

In der Vergangenheit erforderte Select2 eine Option namens initSelection, die definiert wurde, wenn eine benutzerdefinierte Datenquelle verwendet wurde, sodass die anfängliche Auswahl für die Komponente bestimmt werden konnte. Das hat in v3.5 gut funktioniert.