Скрыть опции в select2 multi select

Question

Мне нужно скрыть / показать опции из select2 multi-select

Я пробовал что-то подобное, но второй вариант не скрыт:

 $(document).ready(function() {
  $('#test').select2();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
 <select id="test" multiple style="width:250px">
        <option value="1">One</option>
        <option value="2" style='display:none;'>Two</option>
        <option value="3">Three</option>
    </select>

Я добавил jsfiddle: https://jsfiddle.net/sindhujagovindaraju/xpvt214o/738000/

Answer 1

 .Select-input option:nth-child(4){display: none;}

Answer 2

Вы должны использовать «отключено» вместо «display: none» и писать css, как показано ниже:

$(document).ready(function(){
    $("#test").select2();
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
 <select id="test" multiple style="width:250px">
        <option value="1">One</option>
        <option value="2" disabled>Two</option>
        <option value="3">Three</option>
 </select>

Answer 3

Вы можете использовать ниже код:

опция [значение = 2] {отображение: нет;}

лучше всего, если вы добавляете для каждого элемента li класс / идентификатор css динамически и выбираете их вместо значения, которое может быть динамическим

ps: IE может быть немного проблематичным, хотя Опции с отображением: ни один не скрыт в IE