Sélectionnable "optgroup" à l'aide de select2
J'ai utilisé select2 pour sélectionner plusieurs options dans une liste déroulante, mais est-il possible de choisir 2 pour sélectionner le plein de "optgroup"?? Ce que je veux, c'est lorsque l'utilisateur de sélectionner l'option de groupe de tous les enfants options doivent être sélectionnées. Et je veux le faire à l'aide de jQuery Select2
. Comment pourrais-je faire cela?
J'ai résolu le problème et de pouvoir à l'avenir d'autres, j'ai ajouté le code complet + l'option sélectionner tout vinurip.blogspot.com/2014/11/...
OriginalL'auteur Buvin Perera | 2014-11-17
Vous devez vous connecter pour publier un commentaire.
Cela est possible si vous retourne la Select2 avec une face cachée de l'élément d'entrée -- au lieu de sélectionner l'élément.
De faire un groupe option sélectionnable, vous devez lui donner un "id", mais il semble qu'il peut être une chaîne vide. Vous pouvez alors utiliser le "select2-sélection d'une manifestation pour empêcher le groupe de l'option d'être sélectionné, et au lieu d'avoir son enfant options sélectionnés.
En outre, un
query
fonction peut être prévue pour empêcher un groupe affichage de l'option dans la liste après toutes ses options ont été sélectionnées.Si vous avez des options définies comme ceci:
Vous pouvez instrument de votre Select2 comme ceci:
jsfiddle
Ici est un jsfiddle sans
query
fonction, où le groupe options apparaissent toujours lorsque la totalité de leur enfant, les options sont sélectionnées.est-il possible que lorsque toutes les options sont sélectionnées en vertu de l'opt nom du groupe-il dire "toutes les options sélectionnées"???
La ligne
$select.select2('val', $select.select2('val').concat(childIds));
définit les options sélectionnées. Il ajoute tous les enfants les options du parent sélectionné l'option à tous précédemment sélectionné, les options, et donne ensuite cette liste à la Select2 de contrôle.Je ne pouvais pas obtenir que cela fonctionne avec un
<select
élément car je ne vois pas une façon de faire de la<optgroup>
éléments sélectionnables. Vous devez passer à l'utilisation d'un caché élément d'entrée avec les données comme je l'ai montrer.J'ai mis à jour ma réponse. J'ai inclus un nouveau jsfiddle qui cache un groupe option si tous ses enfants sont sélectionnés. Vous pourriez avoir à modifier le texte à la place si vous le souhaitez.
OriginalL'auteur John S
J'ai utilisé John du code, mais mon problème était que j'avais besoin de la capacité de filtre, donc je l'ai ajouté. Vous pouvez voir le code de travail sur jsfiddle.
C'est le code de requête:
OriginalL'auteur mgalindez
D'abord donner l'id de votre sélectionnez
par exemple
<select style="width: 95%" id="selectgroup">
puis ajouter une classe pour votre "optgroup" comme
puis ajouter ce
Si vous cliquez sur "optgroup" puis Il va sélectionner toutes les options en vertu de la "optgroup".
OriginalL'auteur Maitri
Dans Select2 v4, j'ai trouvé que John S réponse ne fonctionne pas (voir ici). Je suis le chargement de mes données dans un tableau à l'aide d'AJAX et a créé une solution de contournement:
Je suis groupement mes articles par emplacement, et chaque option contient le nom de l'emplacement quelque part dans le code html. Tout moment une "optgroup" en-tête est cliqué, j'obtiens c'est l'endroit (le nom affiché dans la liste déroulante). Puis-je regarder à travers toutes les options dans le #select2 de la table et de trouver celles qui contiennent de l'emplacement de son html.
Je sais que c'est un hacky solution de contournement, mais nous espérons que cela aide/pointe dans la bonne direction.
OriginalL'auteur jgmackay
John'S, à condition que l'exemple fonctionne vraiment bien (V3) pour la plupart des cas. Toutefois, il a un bug:
En supposant que la liste est assez longue pour avoir de défilement. Lorsque vous sélectionnez un élément dans un groupe qui n'est disponible qu'après vous faites défiler vers le bas: vous ne pouvez pas sélectionner l'élément suivant, après celui que vous avez sélectionné à partir de ce groupe plus. C'est parce que ensureHighlightVisible méthode de select2 commence à virer parce que les sélecteurs c'est en utilisant des utilisant des hypothèses que le groupe est toujours "unselectable'. Si le défilement va sauter à chaque fois que vous essayez pour sélectionner l'élément.
Donc, malheureusement, bien que cette solution a l'air vraiment bon - je l'ai abandonné et re-mise en oeuvre sans l'aide de l'id de groupe:
et
OriginalL'auteur Ilya Shaikovsky
J'ai trouvé un plugin pour Select2 v4 qui ajoute la possibilité de cliquer sur le "optgroup" pour sélectionner/désélectionner tous des enfants d'options. Il a fonctionné parfaitement pour moi.
bnjmnhndrsn/select2- "optgroup" -sélectionnez
Merci Ben Henderson!
OriginalL'auteur Magno Alberto