jQuery 如何更改引导程序多选标签而不是全选？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19004466/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the bootstrap multiselect label instead of selected all?
提问by user1121019
I am using the bootstrap Multiselect drop-down instead of number of list showing when hit select all option can we show the All Selected text.
我正在使用引导程序多选下拉列表，而不是在点击全选选项时显示的列表数量，我们可以显示所有选定的文本。
回答by Shamitha Silva
If someone hit this question in the future , solution is change the
如果将来有人遇到这个问题，解决方案是更改
{ nonSelectedText: 'None selected' }
assign a global variable to this text change it through JavaScript.
为该文本分配一个全局变量，通过 JavaScript 更改它。
value resides in bootstrap-multiselect.js file.
值驻留在 bootstrap-multiselect.js 文件中。
回答by Ram
You can change "Label" (of bootstrap multiselect) text for all 4 cases "none selected", "n selected", "All" Selected or "selected values" as follows:
您可以为所有 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
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>
It works for me. Have fun!
这个对我有用。玩得开心！
回答by Philip Puthenvila
Use init obj options.
使用 init obj 选项。
$("#services").multiselect({
nonSelectedText:'Services'
});
This option worked for me.
这个选项对我有用。
回答by user674690
use data-placeholder
使用数据占位符
<select data-placeholder="Month">
This work for me.
这对我有用。
回答by danlynn
Philip's answer worked for me, but just making it a bit more complete, it should be called upon document ready. So the solution for me, including setting multiple lists was:
菲利普的回答对我有用，但只是让它更完整一点，应该在文档准备好后调用。所以我的解决方案，包括设置多个列表是：
$(document).ready(function() {
$("#bedrooms").multiselect({
nonSelectedText:'Bedrooms'
});
$("#bathrooms").multiselect({
nonSelectedText:'Bathrooms'
});
$("#garages").multiselect({
nonSelectedText:'Garages'
});
$("#livingareas").multiselect({
nonSelectedText:'Living Areas'
});
});
回答by Ievgen Baziak
Following the official documentation:
按照官方文档：
allSelectedTextis the text displayed if all options are selected. You can disable displaying theallSelectedTextby setting it to false.
allSelectedText是选择所有选项时显示的文本。您可以allSelectedText通过将其设置为 false来禁用显示。
use option
使用选项
{
...
allSelectedText: false,
...
}
回答by mithataydogmus
I changed 3rd button's (hint of button: Multiselect with a 'Select all' option) id to test. It works but you need to add id to button from developer tools (Chrome / Firefox add F12) first.
我将第三个按钮的（按钮提示：带有“全选”选项的多选）id 更改为test。它可以工作，但您需要先从开发人员工具（Chrome / Firefox 添加 F12）向按钮添加 id。
$('#test+ul>li').change(function(){
$('#test').text($('#test').attr('title'));
});
You can test it after you added the id. Please use jsfiddle.net after that. You may find help more quickly.
添加id后就可以测试了。之后请使用 jsfiddle.net。您可能会更快地找到帮助。
