///////////////////////////////// HTML
//////////////////////////////// JS
Reference -  http://davidstutz.de/bootstrap-multiselect/ 
<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 
                            },
                            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