Select2: Versteckt bestimmte Optionen dynamisch

Im Grunde, was ich Suche, ist die Fähigkeit zu verbergen, Optionen aus dem dropdown-Menü wählen Sie Elemente. So, technisch ist es zwar Optionen, aber Sie wäre einfach nicht in der Lage, klicken Sie auf Sie, da Sie ausgeblendet sind.

Ist, habe ich mich durch die Doku und gefunden haben, die Dinge im Zusammenhang zu deaktivieren, leider habe ich sehr ausdrücklich, dass die Möglichkeit zum ausblenden von Elementen. Hat jemand Ratschläge, wie Sie dies bewerkstelligen?

Wäre es möglich, etwas zu tun haben, die wählen, tun einige spezifische Zuordnung zwischen der ursprünglichen <option> element und die select2 Kopie des Elements, das würde auch funktionieren. Als ein Beispiel, sagen, "wenn der ursprüngliche <option> hat eine solche Klasse oder Attribut, das resultierende Element in der select-dropdown wird gebaut werden auf diese Weise".

InformationsquelleAutor der Frage jacheson | 2014-07-31

  1. 20

    Wäre das hinzufügen der folgenden CSS-Regel auf die Seite, die Ihr problem lösen?

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

    Grundsätzlich wäre es verstecken eine option deaktivieren, anstatt es mit einem grauen hintergrund.

    Verwenden disabled statt display:'none' in Ihre Liste der Optionen auch.

    JS Bin

    InformationsquelleAutor der Antwort John

  2. 4

    Wenn Sie wollen, es zu erreichen , vielleicht kann man das ändern select2.js code,

    Ersten ich verborgen, die zweite option , ursprünglich wird es nicht funktionieren, wenn Sie

    select2 plugin , 

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

    Zweiten werde ich ändern select2.js code: Linie 926

    füge ich zusätzliche Bedingung Anweisung && element.css('display') != 'none' hier 

     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

    InformationsquelleAutor der Antwort holmes2136

  3. 2
    $('.selector').remove();

    Und dann fügen Sie die option nach position, an der es erscheinen select2 :

    Erscheinen als erste Wahl, dann :

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

    Erscheinen als Letzte option dann :

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

    Erscheinen, als nach der Wahl, 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 deaktivieren/aktivieren Sie die option mit jquery anstatt uns zu verstecken.

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

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

    InformationsquelleAutor der Antwort Jitty

  4. 0

    dies ist nur ein kleiner Variation der akzeptierten Antwort, eigentlich hatte ich zum ändern der akzeptierten Antworten, damit es funktioniert, musste ich die Klasse Namen, vielleicht deshalb, weil verschiedene Versionen von Select2 Bibliothek

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

    InformationsquelleAutor der Antwort Hakam Fostok

  5. 0

    Für select2 3.5, das funktioniert für mich:

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

    InformationsquelleAutor der Antwort fangxing

  6. 0

    Ich hatte eine ähnliche Anforderung. Versteckt wurde bevorzugt, aber viele dieser Antworten waren unsicher für mehrere Browser oder zu kompliziert. Ändern select2-code wurde auch in Frage.

    Meine Lösung war, um eine Kopie gespeichert werden die Optionen für die einzelnen wählen Sie im Speicher als ein array. Wenn ich wollte, zu "verstecken" eine option, die ich verwenden würde, jQuery remove(). Wenn ich wollte, "einblenden", dann würde ich erneut hinzufügen, wählen Sie Optionen.

    Denken Sie daran, zu nennen .trigger("ändern") auf die wählen Sie, wenn es möglich ist, Sie sind versteckt, eine option, die vielleicht gerade ausgewählt ist.

    InformationsquelleAutor der Antwort scottysmalls

Schreibe einen Kommentar