Bootstrap déroulante, case à cocher, sélectionnez

Je suis en train de personnaliser un bootstrap liste déroulante avec des cases à cocher et si je sélectionne une case à cocher de la liste déroulante le nom de l'étiquette, je veux être écrit sur la liste déroulante d'entrée délimitées par ' ; " comme dans l'image téléchargée lorsque dropdown est fermé.

Ici est un violon exemple.

Bootstrap déroulante, case à cocher, sélectionnez

InformationsquelleAutor BurebistaRuler | 2014-04-16
  1. 16

    Pas la solution la plus élégante - vous aurez probablement besoin d'affiner un peu cela, 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);
        });
    });
});
    InformationsquelleAutor series0ne
  2. 10

    Je sais que c'est une vieille question, mais encore, vous pouvez utiliser cette bibliothèque pour faire presque (à l'exception du modèle exact vous l'avez demandé) ce que vous voulez http://davidstutz.github.io/bootstrap-multiselect/#getting-started

    InformationsquelleAutor David Létourneau
  3. 2

    Le code suivant fonctionne dans Bootstrap 4.1 si vous ajoutez une fonction pour afficher le menu sur le vol stationnaire, mais lorsque vous cliquez sur le < li > alors votre des cases à cocher devient unclickable. Quelqu'un à 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 ajouter 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 cases à cocher les événements sont déclenchés à deux reprises et a dû choisir la onchange de l'événement 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 jquery, le code comme suit:

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