Select2: Скрыть некоторые параметры динамически

По сути, я ищу возможность скрывать параметры из выпадающего списка выбранных элементов. Таким образом, технически они все еще будут вариантами, но вы просто не сможете щелкнуть их, поскольку они скрыты.

Я просмотрел документы и обнаружил вещи, связанные с отключением, к сожалению, я очень хочу скрыть предметы. У кого-нибудь есть советы как это сделать?

Если бы можно было сделать что-то наподобие того, чтобы select выбрал какое-то конкретное отображение между исходным элементом <option> и копией select2 этого элемента, это также сработало бы. В качестве примера, скажем, "если исходный <option> имеет такой класс или имеет такой атрибут, результирующий элемент в выпадающем списке select будет создан таким образом".

Ответы

Ответ 1

Будет ли добавлено следующее правило CSS на страницу решить вашу проблему?

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

В основном это скроет параметр отключения, а не отобразит его с серым фоном.

Используйте disabled вместо display:'none' в вашем списке опций.

JS Bin

Ответ 2

Если вы хотите его достичь, возможно, вы можете изменить код select2.js,

Сначала я скрыл второй вариант, изначально он не будет работать, если вы используете

select2 плагин,

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

Вторые меня изменят код select2.js: строка 926

я добавлю условие условия && element.css('display') != 'none' здесь

 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

Ответ 3

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

Затем добавьте параметр в соответствии с положением, которое оно отображается в select2:

Чтобы отобразиться как первый вариант, выполните следующие действия:

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

Чтобы отобразиться как последний вариант, выполните следующие действия:

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

Появится как после любого из следующих вариантов:

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

или

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

ИЛИ

Мы можем отключить/включить параметр, используя jquery вместо того, чтобы скрываться.

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

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

Ответ 4

У меня было аналогичное требование. Скрытие было предпочтительным, но многие из этих ответов были неопределенными для нескольких браузеров или слишком сложными. Изменение кода select2 также не могло быть и речи.

Мое решение состояло в том, чтобы сохранить копию параметров для каждого выбора в памяти в виде массива. Когда я захотел "скрыть" вариант, я бы использовал jQuery remove(). Когда я хотел "показать", я бы добавил его к этим опциям выбора.

Не забудьте вызвать .trigger( "change" ) в выборе, если возможно, вы скрываете параметр, который может быть выбран в данный момент.

Ответ 5

Это небольшая вариация принятого ответа, на самом деле мне пришлось изменить принятый ответ, чтобы он работал, мне пришлось изменить имена классов, возможно, это потому, что разные версии библиотеки Select2

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

Ответ 6

Для select2 3.5 это работает для меня:

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

Ответ 7

Я просто потратил 3 часа и нашел для меня очень простое и понятное решение для динамического отображения/скрытия опций в контейнере select2.

Сначала я создаю select2 с этой опцией: {.. templateResult: resultState,..}

Затем я предоставляю этот обратный вызов для копирования всех классов из исходной опции в опцию select2 (я показываю/скрываю опции в зависимости от их классов)

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

В моем CSS я объявил эту строку:

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

Теперь я могу легко показать или скрыть любые параметры в контейнере select2 с помощью addClass ("optInvisible") или removeClass ("optInvisible")..

Пусть это кому-нибудь поможет;) Привет