Tuesday 29 January 2019

Bootstrap multiselect with n-option selected at a time

//////////////////////////////// HTML

<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');
                                 });
                             }
                         }
                     });
                 });


No comments:

Post a Comment

Excel Sort values in ascending order using function TEXTJOIN

 Excel ::  Text ::  1,3,5,2,9,5,11 Result :: 1,2,3,5,5,9,11 Formula ::     TEXTJOIN ( ",",1,SORT(MID(SUBSTITUTE( A1 ,","...