Выделение выпадающего списка Bootstrap

Я пытаюсь настроить выпадающее меню bootstrap с помощью флажков, и, если я выберу флажок из раскрывающегося списка, имя метки, которое я хочу записать в раскрывающемся списке ввода, ограниченном ";", как в загруженном изображении, когда dropdown закрыт.

Вот пример скрипта.

enter image description here

Ответы

Ответ 1

Не самое изящное решение - вы, вероятно, захотите немного доработать это, но это может заставить вас начать:

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

Ответ 2

Я знаю, что это старый вопрос, но все же вы можете использовать эту библиотеку, чтобы сделать почти (кроме точного дизайна, который вы задали), что вы хотите http://davidstutz.github.io/bootstrap-multiselect/#getting-started

Ответ 3

Следующий код работает в Bootstrap 4.1, если вы добавляете функцию для отображения меню при наведении курсора, но при нажатии кнопки & lt; li> тогда ваши флажки становятся неактивными Если у вас есть лучшее решение, пожалуйста, предоставьте.

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

И добавьте эти коды JS:

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

UPDATE

Приведенный ниже код работает хорошо, но события флажков запускаются дважды, поэтому пришлось выбрать событие onchange вместо 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>

и код jquery следующим образом:

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