SelectAllOptionマルチセレクションをクリックしているときに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>

Answer 1

ブートストラップは、「onSelectAll」と呼ばれる機能を提供複数選択。この関数はselect allオプションに使用されます。 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)); 

Answer 2

ブートストラップの複数選択は、このイベントを提供し、onSelectAllのthats。 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>