web-dev-qa-db-fra.com

Select2: Masquer certaines options de manière dynamique

Ce que je recherche, en gros, est la possibilité de masquer des options dans la liste déroulante des éléments sélectionnés. Donc, techniquement, elles seraient toujours des options, mais vous ne pourriez tout simplement pas cliquer dessus car elles sont cachées.

J'ai parcouru les docs et trouvé des choses liées à la désactivation. Malheureusement, je souhaite tout particulièrement pouvoir masquer des éléments. Quelqu'un at-il des conseils sur la façon d'accomplir cela?

Était-il possible de faire quelque chose comme demander à la sélection de faire un mappage spécifique entre l'élément <option> d'origine et la copie select2 de cet élément, cela fonctionnerait également. Par exemple, par exemple, "si le <option> d'origine a une telle classe ou un tel attribut, l'élément résultant dans la liste déroulante de sélection sera construit de cette manière".

hidejquery-select2
22
jacheson

L'ajout de la règle CSS suivante à la page résoudrait-il votre problème?

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

Fondamentalement, il masquerait une option de désactivation au lieu de l'afficher avec un arrière-plan gris.

Utilisez également disabled au lieu de display:'none' dans votre liste d'options.

JS Bin

24
John

Si vous voulez y parvenir, vous pouvez peut-être modifier le code select2.js, 

D'abord, j'ai caché la deuxième option, à l'origine, cela ne fonctionnerait pas 

plugin select2, 

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

Deuxièmement, je modifierai le code select2.js: ligne 926

j'ajoute une déclaration de condition supplémentaire && element.css('display') != 'none' ici 

 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

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

Et ensuite, ajoutez l’option en fonction de la position, elle apparaît dans select2:

Pour apparaître comme première option alors:

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

Pour apparaître comme dernière option alors:

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

Pour apparaître après l'une des options, alors:

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

Ou

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

OU

Nous pouvons désactiver/activer l'option en utilisant jquery, au lieu de masquer.

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

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

J'ai eu une exigence similaire. Cacher était préférable, mais beaucoup de ces réponses étaient incertaines pour plusieurs navigateurs ou trop compliquées. Changer le code select2 était également hors de question.

Ma solution consistait à stocker une copie des options pour chaque sélection en mémoire sous forme de tableau. Quand je voulais "cacher" une option, j'utilisais jQuery remove (). Quand je voulais "dévoiler", je le rajoutais aux options de cette sélection. 

N'oubliez pas d'appeler .trigger ("change") sur la sélection s'il est possible de masquer une option actuellement sélectionnée. 

1
scottysmalls

c'est une petite variation de la réponse acceptée, en fait je devais modifier la réponse acceptée pour la faire fonctionner, je devais changer les noms de classe, peut-être parce que différentes versions de la bibliothèque Select2

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

Pour select2 3.5, cela fonctionne pour moi:

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