Multiselect dropdown with scroll
HTML
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">
<script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<div class="btn-group btnArea">
<select id="ddlArea-optgroups" multiple="multiple">
<optgroup label="Vùng 1">
<option value="HN">Hà Nội</option>
</optgroup>
<optgroup label="Vùng 2">
<option value="LC">Lào Cai</option>
<option value="LS">Lạng Sơn</option>
<option value="CB">Cao Bằng</option>
<option value="TQ">Tuyên Quang</option>
<option value="YB">Yên Bái</option>
<option value="QN">Quảng Ninh</option>
<option value="PT">Phú Thọ</option>
<option value="VP">Vĩnh Phúc</option>
<option value="HB">Hoa Binh</option>
<option value="DB">Điện Biên</option>
<option value="BG">Bắc Giang</option>
<option value="BN">Bắc Ninh</option>
<option value="TN">Thái Nguyên</option>
</optgroup>
<optgroup label="Vùng 3">
<option value="NB">Ninh Bình</option>
<option value="HP">Hải Phòng</option>
<option value="TB">Thái Bình</option>
<option value="TH">Thanh Hóa</option>
<option value="NA">Nghệ An</option>
<option value="HT">Hà Tĩnh</option>
<option value="HD">Hải Dương</option>
<option value="HY">Hưng Yên</option>
<option value="ND">Nam Định</option>
<option value="HM">Hà Nam</option>
</optgroup>
<optgroup label="Vùng 4">
<option value="QB">Quảng Bình</option>
<option value="QT">Quảng Trị</option>
...
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.dropdown-menu {
overflow-y: auto;
overflow-x: hidden;
}
#dummy {
height: 50px;
}
.multiselect-container {
width: 200px;
}
.multiselect-container>li>a {
white-space: normal;
}
JavaScript
$('#ddlArea-optgroups').multiselect({
includeSelectAllOption: false,
enableCaseInsensitiveFiltering: true,
maxHeight: 300,
onChange: function (option, checked) {
var selectedOptions = $('#ddlArea-optgroups option:selected');
if (selectedOptions.length >= 7) {
// Disable all other checkboxes.
var nonSelectedOptions = $('#ddlArea-optgroups option').filter(function () {
return !$(this).is(':selected');
});
var dropdown = $('#ddlArea-optgroups').siblings('.multiselect-container');
nonSelectedOptions.each(function () {
var input = $('input[value="' + $(this).val() + '"]');
input.prop('disabled', true);
input.parent('li').addClass('disabled');
});
} else {
// Enable all checkboxes.
var dropdown = $('#ddlArea-optgroups').siblings('.multiselect-container');
$('#ddlArea-optgroups option').each(function () {
var input = $('input[value="' + $(this).val() + '"]');
input.prop('disabled', false);
input.parent('li').addClass('disabled');
});
}
if (checked) {
orderCount++;
$(option).data('order', orderCount);
} else {
$(option).data('order', '');
}
},
buttonText: function (options) {
if (options.length === 0) {
return 'Lựa chọn mục';
} else if (options.length > 3) {
return options.length + ' selected';
} else {
var selected = '';
options.each(function () {
var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
var vl = $(this).children().children().val();
selected += label + ', ';
});
return selected.substr(0, selected.length - 2);
}
},
...