16

我使用的是引导多选下拉菜单，而不是在点击全选选项时显示的列表数量，我们可以显示所有选定的文本。

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

4

7 回答 7

30

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

{ nonSelectedText: 'None selected' }

为该文本分配一个全局变量，通过 JavaScript 更改它。

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

于 2014-09-07T11:27:30.527 回答
19

您可以更改所有 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>

这个对我有用。玩得开心！

于 2014-09-15T05:06:30.760 回答
8

使用初始化 obj 选项。

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

这个选项对我有用。

于 2015-04-01T01:35:38.663 回答
6

按照官方文档：

allSelectedText是选择所有选项时显示的文本。您可以通过将其设置为 false 来禁用显示allSelectedText。

使用选项

{
...
allSelectedText: false,
...
}
于 2017-02-21T00:55:53.177 回答
5

使用数据占位符 

<select data-placeholder="Month">

这对我有用。

于 2016-04-19T04:02:35.663 回答
4

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

$(document).ready(function() {
    $("#bedrooms").multiselect({
        nonSelectedText:'Bedrooms'
    });
    $("#bathrooms").multiselect({
        nonSelectedText:'Bathrooms'
    });
    $("#garages").multiselect({
        nonSelectedText:'Garages'
    });
    $("#livingareas").multiselect({
        nonSelectedText:'Living Areas'
    });
});
于 2016-10-27T04:08:08.563 回答
1

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

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

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

于 2013-09-25T13:06:20.950 回答