onChange事件没有被触发，当点击SelectAllOption多选时

我已经使用bootstrap multiselect，根据选定的选项获取数据。该过滤器的数据将作品时onChange触发，但想选择所有onChange不工作时：onChange事件没有被触发，当点击SelectAllOption多选时

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>

来源

2017-07-27 Govind Samrow

对不起，这不是完全清楚你在问什么，代码是做什么的，以及你看到的是什么。请回顾[*我如何提出一个好问题？]（/ help/how-to-ask）和[*如何调试小程序*]（https://ericlippert.com/2014/03/05/how -to-调试小程序/）。 –

@TJCrowder onChange在使用select all选项时甚至没有触发 –

如果使用Stack Snippets（'[<>]'工具栏按钮）以** runnable ** [mcve]更新您的问题，也许它可以帮助您获得答案。展示问题。您可以从CDN（如http://cdnjs.com）添加外部资源（Bootstrap）。 –

引导MULTISELECT提供了一个名为“onSelectAll”功能。该功能将用于选择所有选项。您需要使用带onChange功能的onSelectAll函数。

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

来源

2017-07-27 08:11:24

那么我们还需要为deselectall添加事件吗？ –

使用以下代码取消选择bootstrap multiselect的功能。（e）{ isChanged = true;（e）{ isChanged = true;其他{ } isChanged = false; } } –

Bootstrap multiselect为此提供了一个事件，那就是onSelectAll。当您的Select all被选中时，您需要使用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>

来源

2017-07-27 10:50:42

onChange事件没有被触发，当点击SelectAllOption多选时

回答

相关问题