//////////////////////////////// HTML
////////////////////////////// Bootstrap multi-select
<select multiple="multiple" id="ddl_Stations" class="multiselect">
<option value="Alagawadi">Alagawadi</option>
<option value="Attigundi">Attigundi</option>
<option value="Balehonnur.M">Balehonnur</option>
<option value="Bannur">Bannur</option>
<option value="Bennur">Bannur</option>
<option value="Chandapur">Chandapur</option>
</select>
////////////////////////////// Bootstrap multi-select
$(document).ready(function
() {
$('.multiselect').multiselect({
includeSelectAllOption: true,
enableFiltering: true,
maxHeight: 200
});
});
////////////////////////////// Bootstrap multi-select with n-number options
$(document).ready(function
()
{
$('.multiselect').multiselect({
enableFiltering: true,
maxHeight: 400,
enableCaseInsensitiveFiltering: true,
nonSelectedText: 'Select Stations',
numberDisplayed: 2,
selectAll: false,
onChange: function (option, checked) {
// Get selected options.
var selectedOptions = jQuery('.multiselect
option:selected');
if (selectedOptions.length >= 5) {
// Disable all other checkboxes.
var nonSelectedOptions =
jQuery('.multiselect option').filter(function () {
return !jQuery(this).is(':selected');
});
nonSelectedOptions.each(function () {
var input = jQuery('input[value="'
+ jQuery(this).val() + '"]');
input.prop('disabled', true);
input.parent('li').addClass('disabled');
});
}
else {
// Enable all checkboxes.
jQuery('.multiselect
option').each(function () {
var input = jQuery('input[value="'
+ jQuery(this).val() + '"]');
input.prop('disabled', false);
input.parent('li').addClass('disabled');
});
}
}
});
});