Select2: cacher certaines options de manière dynamique
fondamentalement, ce que je cherche est la capacité de cacher des options de la liste déroulante des éléments sélectionnés. Donc, techniquement, ils seraient toujours des options, mais vous ne pourriez pas les cliquer puisqu'ils sont cachés.
j'ai regardé dans les documents et j'ai trouvé des choses liées à l'invalidité, malheureusement je veux très spécifiquement la capacité de cacher des articles. Quelqu'un aurait-il des conseils sur la façon d'accomplir cette?
était-il possible de faire quelque chose comme avoir le select do quelques correspondances spécifiques entre l'original <option> et select2 copie de cet élément, qui pourrait fonctionner ainsi. Par exemple, " si l'original <option> a une telle classe ou a un tel attribut, l'élément résultant dans la liste déroulante select sera construit de cette façon".
6 réponses
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 cacherait une option désactivée au lieu de l'afficher avec un fond gris.
Utiliser disabled au lieu de display:'none' dans votre liste d'options également.
si vous voulez y arriver , vous pouvez peut-être modifier la select2.JS code,
D'abord j'ai caché la deuxième option, à l'origine elle ne fonctionnera pas quand vous utilisez
select2 plugin,
<select id="test" style="width:100px">
<option></option>
<option value='1'>1</option>
<option value='2' style="display:none">2</option>
</select>
Deuxième je vais modifier le select2.code js: ligne 926
j'ai ajouter de l'état de l'instruction && 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);
}
}
};
$('.selector').remove();
et ensuite ajouter l'option en fonction de sa position dans select2:
Pour apparaître comme première option, puis :
$('.selector')
.prepend('<option value="option-value" class="option-value">Option Label</option>');
Pour apparaître comme dernière option, puis :
$('.selector')
.append('<option value="option-value" class="option-value">Option Label</option>');
Pour apparaître comme après toute option, puis :
$('<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'));
OR
nous pouvons désactiver/activer l'option en utilisant jquery, au lieu de se cacher.
$('.selector').prop('disabled', 'disabled');
$('.selector')
.prop('disabled', !$('.selector').prop('disabled'));
c'est une petite variante de la réponse acceptée, en fait j'ai dû modifier la réponse acceptée pour la faire fonctionner, j'ai dû changer les noms de classe, peut-être que c'est parce que différentes versions de bibliothèque Select2
.select2-results__options .select2-results__option[aria-disabled=true] {
display: none;
}
Pour select2 3.5, cela fonctionne pour moi:
.select2-result.select2-result-unselectable.select2-disabled {
display: none;
}
j'ai eu une demande similaire. Il était préférable de se cacher, mais bon nombre de ces réponses étaient incertaines pour plusieurs navigateurs ou trop compliquées. Changer le code select2 était également hors de question.
ma solution était de stocker une copie des options pour chaque select en mémoire comme un tableau. Quand je voulais "cacher" une option, j'utilisais jQuery remove(). Quand je voulais "déshabiller", je le rajoutais aux options de select.
rappelez-vous d'appeler .déclencheur ("changement") sur le sélectionnez s'il est possible que vous cachez une option qui pourrait être actuellement sélectionné.