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.
http://davidstutz.github.io/bootstrap-multiselect/
If an option is selected from dropdown1, then deselect/reset everything in dropdown2. If an option is selected from dropdown2, then deselect/reset everything in dropdown1. $("#dropdown1"). change(function () { $('#dropdown2').
multiselect('disable'); will disable the selector (stored in the variable $widget ). And by replacing disable with enable you can enable it. So just run the function with the correct disable/enable setting and you can do it based on any condition.
Bootstrap Multiselect is a jQuery based plugin that allows users to tick multiple options from a standard Bootstrap select. Its implementation is quite simple, and in exchange brings a lot of UX value. Examples of Bootstrap Multiselect use: Ingredient choice within a pizza delivery system.
HTML MultiSelect Dropdown is a textbox control that allows the user to type or select multiple values from a list of predefined options. It has several out-of-the-box features such as data binding, filtering, grouping, tagging with custom values, and checkbox mode.
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.
value resides in bootstrap-multiselect.js file.
You can change "Label" (of bootstrap multiselect) text for all 4 cases "none selected", "n selected", "All" Selected or "selected values" as follows:
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>
It works for me. Have fun!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With