我正在使用 Bootstrap Multiselect 下拉菜单。我们可以显示“所有选定的”文本,而不是点击“全选”选项时显示的项目数吗?
如果将来有人遇到这个问题,解决方案是更改
{ nonSelectedText: 'None selected' }
为此文本分配一个全局变量,通过 JavaScript 更改它。
值驻留在 bootstrap-multiselect.js 文件中。
您可以更改所有 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>
这对我有用。玩得开心!
使用 init obj 选项。
$("#services").multiselect({
nonSelectedText:'Services'
});
这个选项对我有用。
使用数据占位符
<select data-placeholder="Month">
这对我有用。
遵循官方文档:
是选择所有选项时显示的文本。你 可以通过将其设置为 false 来禁用显示allSelectedText
。allSelectedText
使用选项
{
...
allSelectedText: false,
...
}
菲利普的回答对我有用,但只是让它更完整一点,应该在文件准备好后调用。所以我的解决方案,包括设置多个列表是:
$(document).ready(function() {
$("#bedrooms").multiselect({
nonSelectedText:'Bedrooms'
});
$("#bathrooms").multiselect({
nonSelectedText:'Bathrooms'
});
$("#garages").multiselect({
nonSelectedText:'Garages'
});
$("#livingareas").multiselect({
nonSelectedText:'Living Areas'
});
});
我将第三个按钮的(按钮提示:带有“全选”选项的多选)ID更改为测试。它可以工作,但您需要首先从开发人员工具(Chrome / Firefox 添加 F12)向按钮添加 id。
$('#test+ul>li').change(function(){
$('#test').text($('#test').attr('title'));
});
添加id后即可测试。之后请使用 jsfiddle.net。您可能会更快地找到帮助。