Question

我正在使用bootstrap Multiselect下拉列表而不是显示列表数量时，选择所有选项可以显示所有选定文本。

http://davidstutz.github.io/bootstrap-multiselect/

Answer 1

如果有人在将来遇到这个问题，解决方案就是改变

{ nonSelectedText: 'None selected' }

为此文本指定一个全局变量，通过JavaScript更改它。

值驻留在bootstrap-multiselect.js文件中。

Answer 2

您可以更改所有4种情况“无选择”，“n选择”，“全部”选定或“选定值”的“标签”（引导多选）文本，如下所示：

JQuery的

$('#level').multiselect({
    includeSelectAllOption: true,
    maxHeight: 150,
    buttonWidth: 150,
    numberDisplayed: 2,
    nSelectedText: 'selected',
    nonSelectedText: 'None selected',
    buttonText: function(options, select) {
      var numberOfOptions = $(this).children('option').length;
      if (options.length === 0) {
         return nonSelectedText + ' <b class="caret"></b>';
      }
      else{
             if (options.length > numberDisplayed) {
                 if(options.length === numberOfOptions){
                     return ' All Selected' + ' <b class="caret"></b>';
                 }
                 return options.length + ' ' + nSelectedText + ' <b class="caret"></b>';
             }else {
                 var selected = '';
                 options.each(function() {
                    var label = ($(this).attr('label') !== undefined) ?  
                                                       $(this).attr('label'):$(this).html();
                    selected += label + ', ';
                 });
                 return selected.substr(0, selected.length - 2) + ' <b class="caret"></b>';
             }
       }
    }
});

HTML

<select multiple="multiple" id="level">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

它对我有用。玩得开心！

Answer 3

使用init obj选项。

$("#services").multiselect({
  nonSelectedText:'Services'
});

此选项对我有用。

Answer 4

使用数据占位符

<select data-placeholder="Month">

这项工作适合我。

Answer 5

关注official documentation：

如果选择了所有选项，则显示
allSelectedText。您可以通过将其设置为false来禁用显示allSelectedText。

使用选项

{
...
allSelectedText: false,
...
}

Answer 6

菲利普的回答对我有用，但只是让它更完整，应该在文件就绪时调用。所以我的解决方案，包括设置多个列表是：

$(document).ready(function() {
    $("#bedrooms").multiselect({
        nonSelectedText:'Bedrooms'
    });
    $("#bathrooms").multiselect({
        nonSelectedText:'Bathrooms'
    });
    $("#garages").multiselect({
        nonSelectedText:'Garages'
    });
    $("#livingareas").multiselect({
        nonSelectedText:'Living Areas'
    });
});

Answer 7

我将第3个按钮（提示按钮：多选，带有'全选'）ID更改为测试。它可以工作，但您需要先从开发人员工具（Chrome / Firefox添加F12）添加id到按钮。

$('#test+ul>li').change(function(){
    $('#test').text($('#test').attr('title'));
});

您可以在添加ID后对其进行测试。之后请使用jsfiddle.net。您可以更快地找到帮助。

如何更改bootstrap multiselect标签而不是全部选中？

7 个答案: