Comment utiliser la case à cocher dans Sélectionner une option

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.

entrer la description de l'image ici


Code:

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:

  • ☐ urne – \2610
  • ☑ urne avec chèque – \2611

Ou si vous voulez pimenter les choses, vous pouvez utiliser ces glyphes FontAwesome

  • .fa-square-o .fa-square-o – \f096
  • .fa-check-square-o .fa-check-square-o – \f046

Capture d'écran

Démo dans jsFiddle & Stack Snippets

 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

Utilisez ce code pour la liste de cases à cocher sur le menu d’options.

  

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