Mehrfachauswahlfeld (Jquery Select2-Plugin)

Question

Ich verwende das Jquery Select2-Plugin, um ein Mehrfachauswahlfeld zu erstellen. Ähnlich wie im Beispiel auf Seite https://select2.github.io/examples.html gezeigt ist, ich habe meinen Code erstellt:

$(document).ready(function() { 
     $("#category_tags___name___tagname").select2(
       {placeholder: "Select tags"}, 
     ); 

nun auf Server-Seite I PHP-Framework (Symfony2) bin mit dem HTML-Formular zu erstellen, die in etwa wie folgt aussieht:

<select id="category_tags___name___tagname" name="category[tags][__name__][tagname][]" required="required" style="width:300px" multiple="" tabindex="-1" class="select2-hidden-accessible"> 
      <option value="1">tag1</option> 
      <option value="2">tag2</option> 
      <option value="3" selected="selected">tag3</option> 
</select> 

Dies funktioniert einwandfrei. Wenn Sie auf das Feld klicken, werden die verfügbaren Optionen in der Dropdown-Liste angezeigt. Aber das Problem ist, sobald ich eine der Optionen wähle, wird es in das Feld als ein Tag hinzugefügt, aber es erscheint immer noch in der Dropdown-Liste und ist nicht disabled dh. Wenn ich im Dropdown-Menü erneut auf diese Option klicke, wird die Auswahl aufgehoben.

Ich möchte die Funktionalität, dass, sobald eine Option ausgewählt ist muss es in dem Feld als ein Tag erscheinen, aber es sollte nicht mehr in der Dropdown-Liste angezeigt werden.

Ich habe das Internet nach möglichen Lösungen gesucht. Habe aber bisher nichts gefunden.

Ich bin neu in Jquery. So wird jede Hilfe geschätzt.

Answer 1

Nach der Dokumentation in der ref Website gegeben: https://select2.github.io/examples.html, Ein Weg, um zu erreichen, was Sie nach select2:select und select2:unselect Ereignisse zu verwenden, wären Ihnen benutzerdefiniertes Verhalten auslösen:

versuchen so etwas wie unten:

<option value="1" id='specific-1'>tag1</option> 
    <option id='specific-2' value="2">tag2</option> 
    <option value="3" id='specific-3' selected="selected">tag3</option> 

die in Ihrem js:

zunächst jeder Option Wert in Ihrem hTML ein spezifisch ID etwas wie geben

//when select is triggered 
$("#category_tags___name___tagname").on("select2:select", function (e) { 
    var myID = '#'+e.data.id //getting specific id from event 
    $(myID).css('display','none') //hide it using css 
}); 

//when unselect is triggered 
$("#category_tags___name___tagname").on("select2:unselect", function (e) { 
    var myID = '#'+e.data.id //getting specific id from event 
    $(myID).css('display','block') //show it using css 
}); 

S.S: Der obige Code wurde nicht getestet. Aber die Logik scheint richtig zu sein

Answer 2

Ich bevorzuge es, Daten an die Client-Seite als JSON-Typ zu senden. Wenn ich zum Beispiel

geben möchte data = "[{id:" ", text:" "}, {id:" ", text}]";

Wenn Sie Daten wie oben gesendet haben, können Sie sie mehrfach auswählen und wenn Sie eine auswählen, wird sie nicht mehr angezeigt.

$ ('# id'). Select2 ('Daten', Daten);

und für Ihre HTML-Seite können Sie nur eine Textbox erstellen, die für select2 genug ist