Hiding select2 Optionen

Question

Ich versuche, einige der select2 Optionen zu verstecken, aber wenn ich etwas wie folgt aus:

<option style="display: none;">...</option> 

select2 ignoriert es, anders als wenn ich eine Option zu deaktivieren, oder sie machen „Read-only“ .

Irgendwelche Ideen?

Answer 1

warum brauchen Sie das? Einfach: Entfernen Sie diese Option!

Wenn Sie nur in einigen Fällen zeigen müssen, können Sie Javascript verwenden.

mit jQuery Beispiel:

if (condition) { 
    $('#yourselect').append('<option value="foo" selected="selected">Foo</option>'); 
} 

Answer 2

Sie es mit disabled="disabled" Attribut deaktivieren.

<option value="4" disabled="disabled">Product 4</option> 

Siehe diese fiddle

Answer 3

Vielleicht ist die Frage ist alt, aber ich habe hier für das gleiche Problem. . ich die select2 v bin mit 3.5.1, konnte ich es so beheben:

ich eine Klasse auf die Option hinzufügen, die ich ausblenden möchten:

<option class="hide_me">...</option> 

, die angeblich sein etwas wie:

Grundsätzlich mache ich das gleiche, das Sie durch das Stilattribut getan haben, aber mit einer CSS-Klasse. Das style-Attribut funktioniert auch nicht für mich (selbst wenn das Multi-select2 die ausgewählten Optionen so auszublenden scheint).

Hoffe, das kann helfen.

Answer 4

Sie sollten die Optionen entfernen, die nicht verfügbar sein sollten. Wenn Sie dies dynamisch in JavaScript durchführen müssen, können Sie zuerst das vollständig bestückte Element <select> klonen. Sie können jederzeit alle Optionen aus dem ursprünglichen <select> entfernen und nur die Optionen kopieren, die Sie gerade verfügbar haben möchten. Auf diese Weise verlieren Sie keine Styling, Meta-Daten usw. Sortierung

Hier ist ein Beispiel:

$(document).ready(function() { 
    var select = $(".yourselect"); 
    var selectClone = select.clone(); 

    function updateSelect() { 
     var oldVal = select.val(); 

     // first, remove all options 
     select.find("option").remove(); 

     // now add only those options that should be available from the clone 
     // replace "data-show='yes'" with whatever you criteria might be 
     var options = selectClone.find("option[data-show='yes']").clone(); 
     select.append(options); 

     // restore previously selected value if it is still possible 
     if (select.find("option[value='" + oldVal + "']").length === 0) { 
      oldVal = ""; 
     } 
     select.val(oldVal); 

     // update select2 
     select.trigger('change'); 
    } 
});