Question

我正在使用David Stutz的引导程序Multi-select插件，我无法显示所有选中的＆＃39;。使用allSelectedText方法可以正常工作，但在使用＆＃39; allSelectedText＆＃39;时会被覆盖。回调。

使用上一个问题的答案，我试图抓住孩子的数量并检查他们是否全部被选中（见评论）

注意 - 如果我删除了＆＃39; numberofOptions＆＃39;

，则此功能正常

使用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>

Answer 1

我通过使用文档中的以下内容修复了此问题。

numberDisplayed：1

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

Answer 2

您的代码永远无法访问

else if (options.length === numberOfOptions)

因为

else if (options.length > 1)

已涵盖几乎所有可能的剩余案例（options.length === 1除外）。

此外，默认allSelectedText回调使用buttonText。如果您覆盖它并且未在代码中使用allSelectedText文本，则该文本不会显示。

Bootstrap Multiselect插件显示所有选中的＆＃39;

2 个答案: