引导下拉复选框选择答案

【问题标题】：Bootstrap dropdown checkbox select引导下拉复选框选择
【发布时间】：2014-05-30 23:30:00
【问题描述】：

我正在尝试使用复选框自定义引导下拉菜单，如果我从下拉列表中选择一个复选框，我想在输入下拉列表中写入标签名称，该标签名称以“;”分隔，就像dropdown 关闭时上传的图片一样.

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案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 中有效，但是当您单击

时，您的复选框将无法单击。谁有更好的解决方案请提供。

<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 doesn't disappear.
$(document).on('click', '.dropdown-menu.dropdown-menu-form', function(e) {
  e.stopPropagation();
});

更新

以下代码运行良好，但复选框事件被触发两次，因此必须选择 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();
});

【讨论】：