Le client m’a donné un dessin avec un menu Sélectionner une option contenant une case à cocher avec le nom de l’article en tant qu’éléments individuels dans la liste. Est-il possible d’append une case à cocher dans un menu Sélectionner une option?
NB: Le développeur doit append son propre identifiant pour rendre le menu efficace. J’ai seulement besoin du code HTML CSS si cela est possible.
Vous ne pouvez pas placer la case à cocher dans l’élément select, mais vous pouvez obtenir les mêmes fonctionnalités en utilisant HTML, CSS et JavaScript. Voici une solution de travail possible. L’explication suit.
var expanded = false; function showCheckboxes() { var checkboxes = document.getElementById("checkboxes"); if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = false; } }
.multiselect { width: 200px; } .selectBox { position: relative; } .selectBox select { width: 100%; font-weight: bold; } .overSelect { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #checkboxes { display: none; border: 1px #dadada solid; } #checkboxes label { display: block; } #checkboxes label:hover { background-color: #1e90ff; }
Le meilleur plugin à ce jour est Bootstrap Multiselect
jQuery Multi Select Dropdown with Checkboxes
Voici la démo
Essayez la sélection multiple . Cela semble être une solution propre et bien gérée, avec des tonnes d’exemples.
Pour une approche Pure CSS , vous pouvez utiliser le sélecteur :checked
associé au sélecteur ::before
pour insérer du contenu conditionnel.
Ajoutez simplement la classe select-checkbox
à votre élément select
et incluez les CSS suivantes:
.select-checkbox option::before { content: "\2610"; width: 1.3em; text-align: center; display: inline-block; } .select-checkbox option:checked::before { content: "\2611"; }
Vous pouvez utiliser de vieux caractères unicode simples (avec un codage hexadécimal échappé ) comme ceux-ci:
\2610
\2611
Ou si vous voulez pimenter les choses, vous pouvez utiliser ces glyphes FontAwesome
\f096
\f046
select { width: 150px; } .select-checkbox option::before { content: "\2610"; width: 1.3em; text-align: center; display: inline-block; } .select-checkbox option:checked::before { content: "\2611"; } .select-checkbox-fa option::before { font-family: FontAwesome; content: "\f096"; width: 1.3em; display: inline-block; margin-left: 2px; } .select-checkbox-fa option:checked::before { content: "\f046"; }
Unicode
Font Awesome
Vous pouvez utiliser cette bibliothèque sur git à cette fin https://github.com/ehynds/jquery-ui-multiselect-widget
pour lancer la sélection utilisez ceci
$("#selectBoxId").multiselect().multiselectfilter();
et quand vous avez les données prêtes dans json (à partir de ajax ou de n’importe quelle méthode), commencez par parsingr les données puis assignez-lui le tableau js
var js_arr = $.parseJSON(/*data from ajax*/); $("#selectBoxId").val(js_arr); $("#selectBoxId").multiselect("refresh");
Vous pouvez charger un fichier multiselect.js avant que la liste d’options ne soit mise à jour avec un appel AJAX. Ainsi, lorsque l’exécution du fichier multiselect.js est vide, une liste d’options est disponible pour appliquer la fonction multi-sélection. Donc, commencez par mettre à jour la liste d’options par appel AJAX, puis lancez l’appel multi-sélection pour obtenir la liste déroulante avec la liste d’options dynamics.
Espérons que cela va vous aider.
Liste déroulante multi-sélection et fichiers js & css associés
// This function should be called while loading page var loadParentTaskList = function(){ $.ajax({ url: yoururl, method: 'POST', success: function(data){ // To add options list coming from AJAX call multiselect for (var field in data) { $('').appendTo('#parent_task'); } // To initiate the multiselect call $("#parent_task").multiselect({ includeSelectAllOption: true }) } }); }
// Multiselect drop down list with id parent_task