menu déroulant jQuery multiselect

J’ai une simple liste déroulante html multi select:

 ALLOC LOAD1 LOAD2   

Je souhaite continuer à utiliser cette liste si javascript est désactivé, mais avec javaScript, je souhaite que la liste soit affichée sous forme de liste déroulante multi-sélection. C’est-à-dire qu’il ne montre qu’un élément dans la liste jusqu’à ce que l’utilisateur clique dessus, puis qu’il se développe pour afficher x éléments et fournir un défilement, où je peux sélectionner plusieurs éléments comme prévu, tout en maintenant Maj ou Ctrl.

Nouveau à jQuery était la recherche sur le http://jquery.com/ mais n’a pas encore trouvé ce dont j’ai besoin.

Modifier les utilisateurs de Struts2, la réponse sélectionnée encodera les URL avec [], cela pose des problèmes dans struts2, mais le correctif est très facile. Ouvrez simplement jquery.multiSelect.js et recherchez “[]” et supprimez l’instance utilisée dans une concaténation de chaîne. J’utilise également jQuery 1.4.4 par opposition à la 1.3.2 qui est livré avec elle et tout fonctionne très bien.

    Mise à jour (2017): Les deux bibliothèques suivantes sont devenues les bibliothèques les plus courantes utilisées avec Javascript. Bien qu’ils soient natifs de jQuery, ils ont été personnalisés pour fonctionner avec tout, depuis AngularJS 1.x jusqu’à avoir un CSS personnalisé pour Bootstrap. (JS choisi, la réponse originale ici, semble être tombé à # 3 en popularité.)

    Captures d’écran obligatoires ci-dessous.

    Sélectionnez 2: Sélectionnez 2

    Sélectionnez: Sélectionner


    Réponse originale (2012) : Je pense que la bibliothèque choisie pourrait également être utile. Il est disponible dans les versions jQuery, Prototype et MooTools.

    Vous trouverez ci-joint une capture d’écran de la façon dont la fonctionnalité de sélection multiple est sélectionnée dans Chosen.

    Bibliothèque choisie

    Je cherchais également un simple multi-sélection pour mon entreprise. Je voulais quelque chose de simple, hautement personnalisable et sans grandes dépendances que jQuery.

    Je n’ai pas trouvé un correspondant à mes besoins, alors j’ai décidé de coder le mien.
    Je l’utilise en production.

    Voici quelques démos et documentation: loudev.com

    Si vous voulez consortingbuer, vérifiez le repository github

    • Télécharger jquery.multiselect

    • Inclure les fichiers jquery.multiselect.js et jquery.multiselect.css

    • Remplissez votre entrée de sélection

    • Ajouter le multiselect

      $('#' + Field).multiselect({ checkAllText: "Your text for CheckAll", uncheckAllText: "Your text for UncheckCheckAll", noneSelectedText: "Your text for NoOptionHasBeenSelected", selectedText: "You selected # of #" //The multiselect knows to display the second # as the total });

    • Vous pouvez changer le style

      ui-multiselect { //The button background:#fff !important; //background-color wouldn't work here text-align: right !important; } ui-multiselect-header { //The CheckAll/ UncheckAll line) background: lightgray !important; text-align: right !important; } ui-multiselect-menu { //The options text-align: right !important; }

    • Si vous souhaitez repeupler la sélection, vous devez la rafraîchir:

      $('#' + Field).multiselect('refresh');

    • Pour obtenir les valeurs sélectionnées (séparées par des virgules):

      var SelectedOptions = $('#' + Field).multiselect("getChecked").map(function () { return this.value; }).get();

    • Pour effacer toutes les valeurs sélectionnées:

      $('#' + Field).multiselect("uncheckAll");

    Jetez un oeil à erichynds dropdown multiselect avec une quantité énorme de parameters et de réglages.

    Vous pouvez utiliser selected.i télécharger tout le fichier depuis ce lien

                  

    Tous les fichiers sur tous les mêmes dossiers

      var data = "1,3,4"; var dataarray = data.split(","); $("#mycontrolId").val(dataarray); 

    Vous pouvez pirater les vôtres, sans compter sur les plug-ins jQuery … mais vous devez garder une trace externe (en JS) des éléments sélectionnés car la transition supprime les informations d’état sélectionnées:

            

    J’ai utilisé jQuery MultiSelect pour implémenter un menu déroulant multiselect avec une case à cocher. Vous pouvez voir le guide d’implémentation ici – Liste déroulante multi-sélection avec case à cocher

    L’implémentation est très simple, il suffit d’utiliser le code suivant.

     $('#transactionType').multiselect({ columns: 1, placeholder: 'Select Transaction Type' }); 

    Voulez-vous faire quelque chose comme ça http://jsfiddle.net/robert/xhHkG/

     $('#transactionType').attr({ 'multiple': true, 'size' : 10 }); 

    Mettez ça dans un $(function() {...}) ou un autre onload

    modifier

    Relisez votre question, vous ne cherchez pas vraiment une sélection multiple … mais une liste déroulante vous permettant de sélectionner plusieurs. Ouais, probablement mieux d’utiliser un plugin pour cela ou de l’écrire à partir de rien, ce n’est pas une affaire de type “réponse rapide”.