web-dev-qa-db-fra.com

Bootstrap dropdown checkbox select

J'essaie de personnaliser une liste déroulante bootstrap avec des cases à cocher et si je sélectionne une case à cocher dans la liste déroulante, le nom de l'étiquette que je veux écrire sur la liste déroulante d'entrée délimitée par '; 'comme dans l'image téléchargée lorsque dropdown est fermé.

Voici un exemple de violon .

enter image description here

javascriptjqueryhtmlcsstwitter-bootstrap
26
BurebistaRuler

Ce n'est pas la solution la plus élégante - vous voudrez probablement affiner cela quelque peu, mais cela pourrait vous aider à démarrer:

$(document).ready(function() {
    $("ul.dropdown-menu input[type=checkbox]").each(function() {
        $(this).change(function() {
            var line = "";
            $("ul.dropdown-menu input[type=checkbox]").each(function() {
                if($(this).is(":checked")) {
                    line += $("+ span", this).text() + ";";
                }
            });
            $("input.form-control").val(line);
        });
    });
});
16
series0ne

Je sais que c'est une vieille question mais vous pouvez toujours utiliser cette bibliothèque pour faire presque (sauf la conception exacte que vous avez demandée) ce que vous voulez http://davidstutz.github.io/bootstrap-multiselect/#getting-started

10
David Létourneau

Le code suivant fonctionne dans Bootstrap 4.1 si vous ajoutez une fonction pour afficher le menu en survol, mais lorsque vous cliquez sur <li>, vos cases à cocher deviennent alors impossibles à cliquer. Quiconque ayant une meilleure solution, veuillez fournir.

<ul class="dropdown-menu dropdown-menu-form">
  <li><label class="checkbox"><input type="checkbox">One</label></li>
  <li><label class="checkbox"><input type="checkbox">Two</label></li>
</ul>

Et ajoutez ces codes JS:

// Allow Bootstrap dropdown menus to have forms/checkboxes inside, 
// and when clicking on a dropdown item, the menu doesn't disappear.
$(document).on('click', '.dropdown-menu.dropdown-menu-form', function(e) {
  e.stopPropagation();
});

MISE À JOUR

Le code ci-dessous fonctionne bien mais les événements de cases à cocher sont déclenchés deux fois, donc nous avons dû choisir l'événement onchange au lieu de onclick

<ul class="dropdown-menu dropdown-menu-form">
  <li><label class="checkbox"><input type="checkbox" onchange="some()">One</label></li>
  <li><label class="checkbox"><input type="checkbox" onchange="some()">Two</label></li>
</ul>

et le code jquery comme suit:

$(document).on('click', '.dropdown-menu', function (e) {
    e.stopPropagation();
});
2
Samim