webentwicklung-frage-antwort-db.com.de

Startwerte beim Laden mit Select2 mit Ajax einstellen

Ich habe select2-Steuerelemente, die mit Ajax eingerichtet wurden (sowohl einzeln als auch mehrfach). Ich versuche einige Werte beim Laden der Seite zu haben, kann dies jedoch nicht zum Laufen bringen. Mein Code für select2 ist unten angegeben:

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

Die Ajax-Kombination funktioniert gut, ich habe nur Probleme mit den anfänglichen Werten. Ich habe den folgenden Code ausprobiert, konnte ihn aber nicht zum Laufen bringen:

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

Mein HTML-Code von PHP wird wie folgt zurückgegeben:

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

Ich sehe, dass Werte von PHP ausgefüllt werden, nur meine Jquery hat Probleme. Meine Werte im Steuerelement werden als US | United States of America angezeigt. Ich denke, ich habe die select2-Quelle bearbeitet, um dieses Format als Standard zu erhalten, ohne die Formatierungsoption zu verwenden.

Kann mir bitte jemand helfen, die Standardwerte auszufüllen? Danke im Voraus.

EDIT: Diese Frage bezieht sich auf Select2-Version <4.0. Diese Option wurde von Version 4.0 entfernt und ist jetzt wesentlich einfacher.

34
Ravi

Die Funktion, die Sie als initSelection angeben, wird mit der ursprünglichen value als Argument aufgerufen. Wenn also value leer ist, wird die Funktion nicht aufgerufen.
Wenn Sie value='[{"id":"IN","name":"India"}]' anstelle von data-initvalue angeben, wird die Funktion aufgerufen und die Auswahl kann initialisiert werden.

5
user1983983

Vielleicht funktioniert das für Sie !! Das funktioniert für mich ...

initSelection: function (element, callback) {

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

Überprüfen Sie sehr gut, dass der Code richtig geschrieben ist, mein Problem war in der initSelection, ich hatte initselection

24
JD - DC TECH

Auf neue Version aktualisiert:

Versuchen Sie diese Lösung von hier http://jsfiddle.net/EE9RG/430/

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

Ravi, für 4.0.1-rc.1:

  1. Fügen Sie alle <option>-Elemente in <select> hinzu.
  2. aufruf von $element.val(yourarray).trigger("change"); nach select2 init-Funktion.

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

Dieses Problem wurde gemeldet, aber es wurde immer noch geöffnet . https://github.com/select2/select2/issues/3116#issuecomment-146568753

13

Ein sehr seltsamer Weg zur Weitergabe von Daten. Ich ziehe es vor, einen JSON-String/ein Objekt vom Server zu beziehen und dann Werte und Sachen zuzuweisen.

Wenn Sie dies var elementText = $(element).attr('data-initvalue'); tun, erhalten Sie diesen [{"id":"IN","name":"India"}]. Dieses Ergebnis müssen Sie wie oben vorgeschlagen parse, damit Sie die tatsächlichen Werte für die ID ("IN") und den Namen ("India") erhalten können. Jetzt gibt es zwei Szenarien: Mehrfachauswahl & Einzelwertauswahl2.

Einzelwerte:

$(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.)
});

Mehrfachauswahl

$("#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
    }
});

JETZT HIER IST DER TRICK! Wie von belov91 vorgeschlagen, MÜSSEN Sie dies ...

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

Auch wenn es sich um ein ein- oder mehrwertiges Select2 handelt. Denken Sie jedoch daran, dass Sie die Select2-Ajax-Funktion nicht einem <select>-Tag zuweisen können, es muss ein <input> sein.

Hoffe das hat dir (oder jemandem) geholfen.

Tschüss.

Ich habe hinzugefügt

initSelection: function (element, callback) {

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

Aber auch

.select2('val', []);

am Ende.

Das hat mein Problem gelöst.

4
belov91
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");

Dies wird für Personen funktionieren, die dieselbe Ansicht für mehrere Abschnitte auf der Seite verwenden. Dies wird auf dieselbe Weise zum automatischen Festlegen von Standardeinstellungen auf Ihrer Seite OR besser als auf einer EDIT-Seite funktionieren.

Das "FOR" durchläuft das Array, in dem bereits vorhandene Optionen im DOM geladen sind.

1
gabisajr

Ändern Sie den Wert, nachdem die Seite geladen wurde

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

1
Harry Bosh

sie können Folgendes verwenden 

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

Spät :( aber ich denke, das wird dein Problem lösen.

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

Nach der Datenbindung

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

In meinem Fall war das Problem das Rendern der Ausgabe. Also habe ich den Standardtext verwendet, falls die Ajax-Daten noch nicht vorhanden sind.

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