多选框中点击“全选”时，onChange事件未被触发

Question

我正在使用bootstrap multiselect，根据所选选项获取数据。当onChange触发时，此筛选数据将起作用，但是当尝试选择所有内容时，onChange不起作用：

function getOptions(node, isFilter) {
    var isChanged = false;
    return {
        enableCaseInsensitiveFiltering: isFilter,
        includeSelectAllOption: true,
        filterPlaceholder: 'Search ...',
        nonSelectedText: node,
        numberDisplayed: 1,
        buttonWidth: '100%',
        maxHeight: 400,
        onChange: function () {
            alert('Changes');
            isChanged = true;
        },
        onDropdownHide: function (event) {
            if (isChanged) {
                filterData(node);
                isChanged = false;
            }

        }
    }
}
$('#myselect').multiselect(getOptions('myselect', true));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
<!-- Build your select: -->
<select id="myselect" multiple="multiple">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
</select>

- Govind Samrow

---

非常抱歉，您的问题并不清晰，我无法理解您的代码意图以及您所遇到的问题。请参考如何提出好问题？和如何调试小程序。 - T.J. Crowder

@T.J.Crowder 当使用全选选项时，onChange事件未被触发。 - Govind Samrow

如果您使用 Stack Snippets（[<>] 工具栏按钮）演示问题，并提供一个可运行的 [mcve]，或许可以帮助您获得答案。您可以从像 http://cdnjs.com 这样的 CDN 添加外部资源（Bootstrap）。 - T.J. Crowder

Answer 1

Bootstrap多选框提供了一个名为“onSelectAll”的函数，用于选择所有选项。您需要将onSelectAll函数与onChange函数一起使用。

function getOptions(node, isFilter) {
var isChanged = false;
return {
    enableCaseInsensitiveFiltering: isFilter,
    includeSelectAllOption: true,
    filterPlaceholder: 'Search ...',
    nonSelectedText: node,
    numberDisplayed: 1,
    buttonWidth: '100%',
    maxHeight: 400,
    onChange: function () {
        isChanged = true;
    },
    onSelectAll: function() {
        isChanged = true;
    },
    onDropdownHide: function (event) {
        if (isChanged) {
            filterData(node);
            isChanged = false;
        }

    }
}
}
$('#DDLCity').multiselect(getOptions('City', true));

- Jaydip Shingala

---

那么我们也需要为取消选择所有添加事件吗？ - Govind Samrow

使用以下代码来取消 Bootstrap 多选框的选择功能。 onSelectAll: function(e) { if(e){ isChanged = true; } else { isChanged = false; } } - Jaydip Shingala

Answer 2

Bootstrap多选提供了一个事件，即onSelectAll。当您选中全选时，需要使用onSelectAll。这是您的代码中缺少的代码段：

onSelectAll: function() {
    alert("SELECT ALL");
    isChanged = true;
},

以下是您代码的更新工作版本：

function getOptions(node, isFilter) {
  var isChanged = false;
  return {
    enableCaseInsensitiveFiltering: isFilter,
    includeSelectAllOption: true,
    filterPlaceholder: 'Search ...',
    nonSelectedText: node,
    numberDisplayed: 1,
    buttonWidth: '100%',
    maxHeight: 400,
    onChange: function() {
      alert('Changes');
      isChanged = true;
    },
    onSelectAll: function() {
      alert("SELECT ALL");
      isChanged = true;
    },
    onDropdownHide: function(event) {
      if (isChanged) {
        filterData(node);
        isChanged = false;
      }

    }
  }
}
$('#myselect').multiselect(getOptions('myselect', true));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
<!-- Build your select: -->
<select id="myselect" multiple="multiple">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
</select>

- Milan Chheda

Answer 3

要触发“全选”选项的事件，您可以使用以下代码：

$('#example-onSelectAll').multiselect({
   includeSelectAllOption: true,
   onSelectAll: function(options) {
       alert('onSelectAll triggered, ' + options.length + ' options selected!');
   }
});

对于取消选择所有选项，您可以使用：

$('#example-onDeselectAll').multiselect({
    includeSelectAllOption: true,
    onDeselectAll: function(options) {
        alert('onDeselectAll triggered, ' + options.length + ' options deselected!');
    }
});

参考资料：Bootstrap Multiselect

- Tarek.Mh