标签: bootstrap-multiselect

我有一个多选下拉列表,如下所示

<select id="data" name="data" class="data" multiple="multiple">
  <option value="100">foo</option>
  <option value="101">bar</option>
  <option value="102">bat</option>
  <option value="103">baz</option>
</select>

在加载页面时,我将得到一个像[101,102]这样的值数组.我应该遍历数组并选择值(应检查对应于id的复选框).请帮忙.

我正在尝试使用Bootstrap multiselect,我使用了以下代码

HTML

<input type="text" id="addRow"/>
<input type="button" id="btn" value="Add"/>
<form id="form1">
   <div style="padding:20px">
     <select id="chkveg" multiple="multiple">
     </select>
   </div>
</form>

和脚本

$(function () {
    $('#btn').click(function () {
        var val = $("#addRow").val();
        var htm = '';
        htm += '<option>' + val + '</option>';
        $('#chkveg').append(htm);
    });
    $('#chkveg').multiselect({
        includeSelectAllOption: true
    });
});

我试图动态地将每个选项添加到bootstrap multiselect,但它不能正常工作

演示页面:http://jsfiddle.net/pL4hg76b/1/

但其静态工作:http://jsfiddle.net/KyleMit/7yq7fvsq/

我正在使用bootstrap Multiselect下拉列表,而不是显示当列表选择所有选项的列表数量时,我们可以显示所有选定的文本.

http://davidstutz.github.io/bootstrap-multiselect/

我使用的是大卫Sutz的引导多选,我无法找到一个方法来修改.dropdown-menu上onDropdownShow.在下面的函数中设置宽度不起作用:

$('#flavor').multiselect({
    onDropdownShow: function(event) {
        $(this).closest('.dropdown-menu').css('width','500px')
    }
});

问题在于$(this)它似乎不是一个DOM节点,尽管我期望它#flavor.

我要做的是根据窗口的宽度动态更改菜单的宽度(基本上使其响应),因此每次打开菜单时都需要执行代码.另外我的页面上有多个多选框,所以它确实需要是没有硬编码DOM引用的通用函数,因此需要$(this)工作.

我使用bootstrap-sass和bootstrap-multiselect有一个奇怪的问题.看起来像bootstrap-sass事件处理程序阻止多项选择处理程序下拉等.

这个包通过凉亭安装:

'bootstrap-sass-official#3.3.1',
'bootstrap-multiselect'

应用程序构建在django和python上,所以模板将脚本绑定到页面:

{% compress js %}
    <script src="{% static 'jquery/dist/jquery.js' %}"></script>
    <script src="{% static 'bootstrap-sass/assets/javascripts/bootstrap.js' %}"></script>
{% endcompress %}

特定页面上的绑定脚本使用:

{% block extrajs %}
    <script src="{{ STATIC_URL }}bower_components/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"
            type="text/javascript" charset="utf-8"></script>
{% endblock %}

crearing multiselect控制:

$('.multiselect').multiselect()

没什么特别的.但是,当我尝试在UI上使用多选控件时,它不会下降.控制台没有错误.

在浏览代码之后,我发现有一些事件处理程序会阻止多选处理程序执行:

  // APPLY TO STANDARD DROPDOWN ELEMENTS
  // ===================================

  $(document)
    .on('click.bs.dropdown.data-api', clearMenus)
    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
    .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
    .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
    .on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown)
    .on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown)

所以,棘手的解决方案是首先在使用多选的页面上关闭标准事件处理程序:

$(document)
     .off('click.bs.dropdown.data-api')
     .off('keydown.bs.dropdown.data-api') …

我已经在我的网络应用程序中使用bootstrap multiselect大约9个月了.我一直在设计下拉列表的宽度为100%,如下所示:

    ul.multiselect-container {
      width: 100% !important;
    }

.dropdown-menu {width:100% !important;}

我刚刚获得了新版本,因为它有一个额外的配置选项(onDeselectAll).现在下拉宽度不是100%.看看元素控制台中的样式,看起来我的css应该仍然可以工作:

我们可以在css的照片中看到.dropdown-menu {width:100% !important}被覆盖但我不确定是什么.

有任何想法吗？

我正在使用bootstrap multiselect列表框.当用户在多选中选择选项时,它会正确显示.但是可以选择重置以前选择的选项.当用户单击重置按钮时,会自动style=display:none添加到下拉按钮,下拉列表将变为不可见.

这是我的代码

$("#button").click(function () {

    $('option', $('.multiselect')).each(function (element) {
        $(this).removeAttr('selected').prop('selected', false);

    });
    $('.multiselect').multiselect('refresh');
});

我使用bootstrap-multiselect(v0.9.8)和option

 includeSelectAllOption: true 

在加载页面时,默认选择所有要检查的内容是否可行？

谢谢.

我正在使用Bootstrap multiselect,我想添加一个选项来取消选中所有选定的选项.请为我提供相同的解决方案.谢谢你的帮助 :)

我正在使用David Stutz的Bootstrap-Mutliselect.我使用以下代码将它连接到我页面中的所有选择元素:

$(function () {
    $("select").multiselect(
        { enableFiltering: true },
        { maxHeight: 5 },
        { multiple: false }
    );

    $("[multiple]").multiselect(
        { enableFiltering: true },
        { maxHeight: 5 },
        { enableCaseInsensitiveFiltering: true }
    );
});

上面的代码非常有效.问题是具有长文本值的选项会按照以下屏幕截图覆盖其容器边界,而不是换行到新行.

我怎样才能解决这个问题？优选地,如果有一种方法可以通过简单地改变我的上述.js代码来实现它,这将是一个奖励.