Tuesday 5 February 2019

Reset bootstrap multi-select dropdownlist using jquery

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


<select size="4" 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>
                     <option value="Chapoli (M)">Chapoli</option>
                     <option value="Chikkalgud">Chikkalgud</option>
                     <option value="Chincholi.M">Chincholi</option>

              </select>



//////////////////////////////// JS


<script>

function Fill_DropdownLists(fnName) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            contentType: 'application/json; charset=utf-8',
                            url: Page.aspx/' + fnName,
                            data: ''
                            dataType: "json",
                            success: function (data) {
                                debugger;
                                var $ddls = $('[id$=' + ddlFillID + ']');
                                $ddls.empty();
                                $.each(data.d, function () {
                                    $ddls.append($("<option></option>")
                                         .val(this['id']).html(this['Name']));
                                });
                           $ddls.multiselect('destroy');////destroy ul li from select option
                                Ddl_Multiselect(ddlFillID);///bind again multiselect
                            },
                            error: function (result) {
                                alert("Error");
                            }
                        });
                    }

function Ddl_Multiselect(ddlFillID) {
                                            $('[id$='+ddlFillID+']').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');
                                                        });
                                                    }
                                                }
                                            });
                                        }

                </script>


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 ,","...