Question

我正在使用selectpicker plugin。现在我尝试默认选择所有选项，或者至少选择一个按钮来选择所有选项而不需要在下拉列表中单击。

目前，仅当点击下拉列表时，该演示才有效，之后单击按钮。

有什么想法吗？

$('.selectpicker').selectpicker();


$(".btn_clk").click(function () {
    $('.selectpicker').selectpicker('selectAll');
});

http://jsfiddle.net/tpnw96ed/

Answer 1

您可以在点击按钮之前/之后打开/关闭Selectpicker：

$(".btn_clk").click(function () {
    $('.dropdown-menu').css("display","block");
    $('.selectpicker').selectpicker('selectAll');
    $('.dropdown-menu').css("display","none");
});

修改：您还需要添加以下内容以手动触发selectAll后点击的下拉列表：

$('.selectpicker').click(function () {
    if($('.dropdown-menu').css("display") == "block") $('.dropdown-menu').css("display","none");
    else $('.dropdown-menu').css("display","block");
});

JSFIDDLE

Answer 2

现在可以通过默认方式添加全选和取消全选按钮来选择点按。您应该使用选项data-actions-box="true"启用按钮，data-select-all-text="Select all buttton name" data-deselect-all-text="Deselect all button name"重命名

Answer 3

试试这个：

  $('.selectpicker').selectpicker('val', ['Mustard','Relish', 'Ketchup']);

Answer 4

此thread中的解决方案适用于我。

以下是插件的更新代码：

boostrapt-select.js

中的第888行和第895行

selectAll: function () {
  this.findLis();
  this.$lis.not('.divider').not('.disabled').not('.selected').not('.hide').find('a').click();
},

deselectAll: function () {
  this.findLis();
  this.$lis.not('.divider').not('.disabled').filter('.selected').not('.hide').find('a').click();
},

请注意，更改.filter(':visible')现在为.not('.hide')

Answer 5

如果要为“选择/取消选择所有选项”添加“全选”选项，请在此处解决。

HTML：

<select role="my-select" class="selectpicker" multiple>
   <option value="all">Select All</option>
   <option value="1">Dog</option>
   <option value="2">Cat</option>
   <option value="3">Tiger</option>
</select>

JS：

$('.selectpicker').selectpicker();

$('[role="my-select"]').on('changed.bs.select', function(e, clickedIndex) {
  if (clickedIndex !== 0) {
    return;
  }

  if (this.value === 'all') {
    return $(this).selectpicker('selectAll');
  }

  $(this).selectpicker('deselectAll');
});

JSFIDDLE

selectpicker默认选择all

5 个答案: