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多選時

回答

相關問題