Créer des listes déroulantes à choix multiples avec jQuery

jQuery MultiSelect nécessite jQuery 1.2 ou plus et le plugin jQuery Dimensions.

Dans sa forme la plus simple, vous pouvez créer une zone de sélection multiple en utilisant le code suivant :

$(document).ready( function() {
    $("#control_id").multiSelect();
});

où #control_id est l'identifiant de l'élément select qui existe dans votre page. Vous pouvez prendre n'importe quel sélecteur jQuery valide pour identifiant, mais assurez-vous de ne positionner l'attribut multiple=« multiple » que sur des éléments select pour obtenir le résultat escompté.

Les paramètres sont passés dans un objet JSON à la fonction multiSelect(). Les options valides sont :

Pour créer une zone de sélection multiple avec plusieurs paramètres, votre code ressemblera à quelque chose comme :

$(document).ready( function() {
    $("#control_id").multiSelect({
      selectAll: false,
      noneSelected: 'Sélectionnez des éléments!',
      oneOrMoreSelected: '% options sélectionnées'
    });
});

Le plugin MultiSelect s'appuie à 100 % sur des feuilles de style. Pour fournir à vos utilisateurs une agréable expérience utilisateur, vous devez soit utiliser la feuille de style incluse dans la démo, soit créer la vôtre. Référez-vous à jqueryMultiSelect.css pour modifier les styles.

Si vous spécifiez une fonction callback, le contrôle de sélection multiple l'appellera chaque fois qu'une case à cocher changera d'état. Actuellement, la fonction passe la case à cocher qui a été cliquée comme un objet jQuery. Votre code ressemblera à quelque chose comme ça si vous définissez une fonction callback :

$(document).ready( function() {
    $("#control_id").multiSelect(options, function() {
        alert('Quelque chose a été coché!');
    });
});

où options vaut soit null, soit un objet JavaScript (voir le paragraphe sur le paramétrage).

• Masquer la liste de sélection sur un clic à l'extérieur de la liste de sélection.
• Retirer la sélection d'un élément quand cet élément obtient le focus.
• L'option « Tout sélectionner » doit être cochée si toutes les options sont cochées manuellement.

Quand la liste d'éléments défile, les raccourcis clavier n'appellent pas le suivi de la sélection par la barre de défilement.

• Bug de l'affichage des éléments select (voici une solution possible qui peut être utilisée dans votre HTML/CSS).
• max-height ne fonctionne pas (propriété CSS non supportée).
• Le clic sur le nom des options ne coche pas la case correspondante (comportement normal du navigateur).