Bootstrap dropdown checkbox select

Question

I'm trying to customize a bootstrap dropdown with checkboxes and if I select a checkbox from dropdown the label name I want to be written on input dropdown delimited with ';' like in uploaded picture when dropdown is closed.

Here is a fiddle example.

Answer 1

Not the most elegant solution - you will probably want to refine this somewhat, but this might get you started:

$(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);
        });
    });
});

Answer 2

I know it's a old question but still, you can use this library to do almost (except the exact design you asked) what you want http://davidstutz.github.io/bootstrap-multiselect/#getting-started

Answer 3

The following code works in Bootstrap 4.1 if you add a function to show the menu on hover, but when you click the < li > then your checkboxes becomes unclickable. Anybody having a better solution please provide.

<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>

And add these JS codes:

// 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();
});

UPDATE

The below code is working good but checkboxes events are fired twice so had to choose the onchange event instead of 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>

and the jquery code as follows:

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