it-swarm.com.de

select2: Standardauswahl bei Mehrfachauswahl mit AJAX

Ich verwende die fantastische select2 , um eine Mehrfachauswahl-Kombination zu erstellen.

Ich möchte die Standardwerte programmgesteuert auswählen (wie in den zuvor vom Benutzer vorgenommenen Auswahlmöglichkeiten), aber ich weiß nicht wie. Ich habe gelesen, dass mit initSelection der Trick funktioniert, aber das wird beim Erstellen der Combo aufgerufen, und ich möchte nicht, dass diese Standardauswahl immer durchgeführt wird.

20

richtige Lösung in Version 4.x am Beispiel:

$('#element').val(['val1','val2']).trigger('change');

siehe: Erstellerbeschreibung

14
Ramin Firooz

Ich habe einige Lösungen gefunden, vielleicht hilft Ihnen das:

$('#el').select2({...}) // init select2

var defaultData = [{id:1, text:'Item1'},{id:2,text:'Item2'},{id:3,text:'Item3'}];

$('#el').data().select2.updateSelection(defaultData);
5
sanj

Wie in der Dokumentation hier beschrieben, können Sie Ihrer Auswahlmarkierung einfach "Optionen" hinzufügen, um die ursprünglichen Standardwerte vorzuwählen.

<select class="js-data-example-ajax">
  <option value="3620194" selected="selected">select2/select2</option>
</select>
3
Thomas Clowes

Von der Dokumentationsseite:

" val - Ruft die Auswahl ab oder legt diese fest. Wenn der Wertparameter nicht angegeben wird, wird das Attribut id des aktuell ausgewählten Elements zurückgegeben. Wenn der Wertparameter angegeben wird, wird er zur aktuellen Auswahl."

Auch aus den Dokumenten:

$("#e8").select2("val", "CA");
3
user504674

$('#el').select2().val(['val1','val2']).trigger("change")

macht den Trick, aber aus einigen Gründen wird die Möglichkeit, ein eigenes Tag hinzuzufügen, aufgehoben ...

2
sebap

Ich habe durch ein Array von Werten geschlungen

values = [2, 5, 3]

for val in values
  $("#selects_id option[value="+val+"]").prop("selected",true).trigger("change")

Sie können auch die Ergebnisse eines Ajax-Anrufs nutzen.

1
longJOURNEY

Endlich herausgefunden !! Select2 durchläuft das <option>-Tag unter dem <select>

<select class="js-data-example-ajax" style="width:100%">
  <option value="3620194" selected="selected">Put the pre-selected options here</option>
</select>

Die innere HTML-Datei von <option> wird unter dem Textschlüssel in das Repo-Objekt eingefügt. repo.text gibt also die innerhtml aus. Das heißt, wir müssen nur repo.text an die formatSelection-Option in init übergeben. Auch der Json, der vom Servlet (Controller) übergeben wird, sollte den gewünschten Etikettentext unter der text-Taste haben !! .__ Immer noch herauszufinden, wie man den erstellten li-Elementen Attribute hinzufügt, damit ich die geänderte Liste speichern kann. Irgendwelche Ideen?

0
Ab Sin

Der folgende Code funktioniert gut, aber der select2 muss aktualisiert werden

$('#el').data().select2.updateSelection(defaultData);
0
Fayez Barbari

Zu erweitern auf @sanj Antwort . Dies scheint für mich in meinen Projekten zu arbeiten.

Über HTML

HTML

<select class="select2" style='width:100%;' multiple>
    <option val=''>Please choose</option>
    <option val="1" selected>One</option>
    <option val="2" selected>Two</option>
    <option val="3">Three</option>
</select>

JS

$('.select2').select2();

Ergebnisse  enter image description here

Über Javascript

HTML

<select class="select2" style='width:100%;' multiple>
    <option val=''>Please choose</option>
    <option val="1">One</option>
    <option val="2">Two</option>
    <option val="3">Three</option>
</select>

JS

$('.select2').select2();
var defaultData = [{id:1, text:'One'},{id:2,text:'Two'}];
$('.select2').data().select2.updateSelection(defaultData);

Ergebnisse  enter image description here

0
Louwki