///////////////////////////////// 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 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