webentwicklung-frage-antwort-db.com.de

Select2: Bestimmte Optionen dynamisch ausblenden

Grundsätzlich suche ich nach der Möglichkeit, Optionen aus dem Dropdown-Menü der ausgewählten Elemente auszublenden. Technisch gesehen wären das also immer noch Optionen, aber man kann sie nicht anklicken, da sie verborgen sind.

Ich habe die Dokumente durchgesehen und Dinge gefunden, die sich auf das Deaktivieren beziehen. Leider möchte ich ausdrücklich die Möglichkeit haben, Elemente auszublenden. Hat jemand einen Rat, wie man das erreichen kann?

Wäre es möglich, so etwas zu tun, wenn select eine bestimmte Zuordnung zwischen dem ursprünglichen <option>-Element und der select2 - Kopie dieses Elements durchführt, dann würde das auch funktionieren. Beispiel: "Wenn der ursprüngliche <option> eine solche Klasse hat oder ein solches Attribut besitzt, wird das resultierende Element in der Auswahlliste auf diese Weise konstruiert".

22
jacheson

Würde das Problem durch das Hinzufügen der folgenden CSS-Regel zur Seite gelöst?

.select2-container--default .select2-results__option[aria-disabled=true] {
    display: none;
}

Grundsätzlich würde eine Deaktivierungsoption ausgeblendet, anstatt sie mit einem grauen Hintergrund anzuzeigen.

Verwenden Sie auch disabled anstelle von display:'none' in Ihrer Optionsliste.

JS Bin

24
John

Wenn Sie dies erreichen möchten, können Sie den select2.js-Code ändern. 

Zuerst habe ich die zweite Option ausgeblendet. Ursprünglich funktioniert sie nicht, wenn Sie sie verwenden 

select2 plugin, 

<select id="test" style="width:100px">
  <option></option>
  <option value='1'>1</option>
  <option value='2' style="display:none">2</option>
</select>

Zweitens werde ich den select2.js-Code ändern: Zeile 926

ich füge hier eine zusätzliche Bedingungsanweisung && element.css('display') != 'none' hinzu 

 process = function (element, collection) {
     var group;
     if (element.is("option") && element.css('display') != 'none') {
         if (query.matcher(term, element.text(), element)) {
              collection.Push(self.optionToData(element));
              }
     } else if (element.is("optgroup")) {
              group = self.optionToData(element);
              element.children().each(function (i, Elm) { 
                       process(Elm, group.children); 
                   });
              if (group.children.length > 0) {
                       collection.Push(group);
              }
      }
     };

JSBIN http://jsbin.com/qusimi/1/edit

6
holmes2136

Ich habe gerade 3 Stunden investiert und eine sehr saubere und einfache Lösung für mich gefunden, um dynamisch Optionen in einem select2-Container ein- und auszublenden.

Zuerst erstelle ich das select2 mit dieser Option: {.. templateResult: resultState, ..}

Dann gebe ich diesen Rückruf, um alle Klassen von der ursprünglichen Option in die select2-Option zu kopieren (ich zeige/verstecke Optionen in Abhängigkeit von ihren Klassen)

    function resultState(data, container) {
    if(data.element) {
        $(container).addClass($(data.element).attr("class"));
    }
    return data.text;
}

In meinem CSS habe ich diese Zeile deklariert:

.select2-container--default .select2-results__option.optInvisible {
display: none;}

Jetzt kann ich mit addClass ("optInvisible") oder removeClass ("optInvisible") einfach alle Optionen im select2-Container ein- oder ausblenden.

Möge das jemandem helfen;) Grüße

4
Peter Schilling
$('.selector').remove(); 

Fügen Sie dann die Option an die Position an, an der sie in select2 angezeigt wird:

Um als erste Option zu erscheinen, dann:

$('.selector')
.prepend('<option value="option-value" class="option-value">Option Label</option>');

Um als letzte Option zu erscheinen, dann:

$('.selector')
.append('<option value="option-value" class="option-value">Option Label</option>');

Um als nach einer der Optionen zu erscheinen, dann:

$('<option value="option-value" class="option-class">Option Label</option>')
.insertAfter($('.selector option:first-child'));

Oder

$('<option value="option-value" class="option-value">Option Label</option>')
.insertAfter($('.selector > .option-class'));

ODER

Wir können die Option mithilfe von jquery deaktivieren/aktivieren, anstatt sie auszublenden.

$('.selector').prop('disabled', 'disabled');

$('.selector')
.prop('disabled', !$('.selector').prop('disabled'));
3
Jitty

Ich hatte eine ähnliche Anforderung. Verbergen wurde bevorzugt, aber viele dieser Antworten waren für einige Browser unsicher oder zu kompliziert. Das Ändern des select2-Codes war ebenfalls nicht in Frage.

Meine Lösung bestand darin, eine Kopie der Optionen für jeden Auswahlspeicher als Array zu speichern. Wenn ich eine Option "verstecken" wollte, würde ich jQuery remove () verwenden. Wenn ich "einblenden" wollte, würde ich es den Optionen dieser Auswahl erneut hinzufügen. 

Denken Sie daran, .trigger ("change") beim select aufzurufen, wenn Sie möglicherweise eine aktuell ausgeblendete Option ausblenden. 

1
scottysmalls

dies ist eine kleine Variation der akzeptierten Antwort, tatsächlich musste ich die akzeptierte Antwort ändern, damit sie funktioniert. Ich musste die Klassennamen ändern

.select2-results__options .select2-results__option[aria-disabled=true] {
   display: none;
}
0
Hakam Fostok

Bei select2 3.5 funktioniert das für mich:

.select2-result.select2-result-unselectable.select2-disabled {
    display: none;
}
0
fangxing