hide - close - Select2: Ocultar ciertas opciones dinámicamente

select2 disable option

Question

Básicamente, lo que busco es la capacidad de ocultar opciones del menú desplegable de elementos seleccionados. Entonces, técnicamente aún serían opciones, pero simplemente no podrías hacer clic en ellas ya que están ocultas.

He revisado los documentos y he encontrado cosas relacionadas con la desactivación, desafortunadamente, quiero específicamente la posibilidad de ocultar elementos. ¿Alguien tiene consejos sobre cómo lograr esto?

Si fuera posible hacer algo como hacer que el selecto haga un mapeo específico entre el elemento <option> original y la copia select2 de ese elemento, eso también funcionaría. Como ejemplo, diga, "si la <option> original tiene tal clase o tiene dicho atributo, el elemento resultante en el menú desplegable de selección se construirá de esta manera".

Answer 1

¿Añadir la siguiente Regla CSS a la página solucionaría tu problema?

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

Básicamente, ocultaría una opción de desactivación en lugar de mostrarla con un fondo gris.

Use disabled lugar de display:''none'' en su lista de opciones también.

Js bin

Answer 2

Para select2 3.5, esto funciona para mí:

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

Answer 3

Si desea lograrlo, tal vez pueda modificar el código select2.js,

Primero escondí la segunda opción, originalmente no funcionará cuando uses

plugin select2,

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

Segundo modificaré el código select2.js: línea 926

agrego una declaración de condición adicional && element.css(''display'') != ''none'' aquí

 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

Answer 4

Tenía un requisito similar. Se prefería ocultarse, pero muchas de estas respuestas eran inciertas para varios navegadores o demasiado complicadas. Cambiar código select2 también estaba fuera de la cuestión.

Mi solución fue almacenar una copia de las opciones para cada selección en la memoria como una matriz. Cuando quería "ocultar" una opción, usaría jQuery remove (). Cuando quería "mostrar", lo volvía a agregar a las opciones de esa selección.

Recuerde llamar a .trigger ("cambio") en la selección si es posible que esté ocultando una opción que podría estar seleccionada actualmente.

Answer 5

esta es una pequeña variación de la respuesta aceptada, en realidad tuve que modificar la respuesta aceptada para que funcionara, tuve que cambiar los nombres de las clases, tal vez esto se deba a las diferentes versiones de la biblioteca Select2

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

Answer 6

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

Y luego agregue la opción según la posición en que aparece en select2:

Para aparecer como primera opción entonces:

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

Para aparecer como última opción entonces:

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

Para aparecer como después de cualquiera de las opciones entonces:

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

O

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

O

Podemos deshabilitar / habilitar la opción usando jquery , en lugar de ocultar.

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

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