2015-04-17 85 views
3

我正在使用David Stutz的bootstrap多選插件,我無法顯示'all selected'。使用allSelectedText方法可以工作,但在使用'allSelectedText'回調時它會被覆蓋。Bootstrap Multiselect Plugin顯示'all selected'

使用前一個問題的答案,我試圖抓住孩子的數量和檢查,如果他們都選擇(見註釋)

注意 - 這是工作,如果我刪除了「numberofOptions」

使用buttonText回調/ allSelectedText方法,這裏有一個鏈接到文檔 - http://davidstutz.github.io/bootstrap-multiselect/

您的輸入表示讚賞。

JS

$(document).ready(function() { 
     $('#multiselect').multiselect({ 
      //Following line is being overridden by the numberOfOptions 
      allSelectedText: 'All Selected', 
      buttonText: function(options, select) { 
      //grab the number of childeren to later return 'all selected' 
      var numberOfOptions = $(this).children('option').length; 
       if (options.length === 0) { 
        return 'Select'; 
       } 
       else if (options.length > 1) { 
        return '1+ Selected'; 
       } 
       //This line is calculating number of options, 
       //displaying 'AllSelected in the label' 
       else if (options.length === numberOfOptions) { 
        return 'AllSelected'; 
       } 
       else { 
        var labels = []; 
        options.each(function() { 
         if ($(this).attr('label') !== undefined) { 
          labels.push($(this).attr('label')); 
         } 
         else { 
          labels.push($(this).html()); 
         } 
        }); 
        return labels.join(', ') + ''; 
       } 
      }, 

      buttonWidth: '100%', 
      includeSelectAllOption: true, 
     }); 
    }); 

HTML

<select id="multiselect" multiple="multiple"> 
     <option value="x">XYZ</option> 
     <option value="x">XYZ</option> 
     <option value="x">XYZ</option> 
     <option value="x">XYZ</option> 
     <option value="x">XYZ</option>    
</select> 
+1

你能提供你的HTML代碼SELECT標籤的摘錄? –

+0

對不起,編輯。查看帖子。 – Mintberry

回答

2

我通過使用以下文件解決了這個問題。

numberDisplayed:1

$(document).ready(function() { 
     $('#multiselect').multiselect({ 
      allSelectedText: 'All', 
      numberDisplayed: 1, 
      buttonWidth: '100%', 
      includeSelectAllOption: true, 
     }); 
    }); 
0

你的代碼永遠不會達到

else if (options.length === numberOfOptions) 

因爲

else if (options.length > 1) 

已經涵蓋了幾乎所有可能的剩餘案例(options.length === 1除外)。

另外,allSelectedText被默認使用buttonText回調。如果您覆蓋它並且不在代碼中使用allSelectedText文本,則該文本不會顯示。

+0

謝謝你的輸入,我決定用內置的'numberDisplayed' – Mintberry

相關問題