Multiselect dropdown in bootstrap multiselect
Multiselect dropdown in bootstrap multiselect
HTML
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<body>
<select name="lstStates" multiple="multiple" id="lstStates">
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="OH">Ohio</option>
<option value="TX">Texas</option>
<option value="PA">Pennsylvania</option>
<option value="GG">asdfa</option>
<option value="AW">jghjh</option>
<option value="AE">qwer</option>
</select>
</body>
JavaScript
$(function () {
$('#lstStates').multiselect({
buttonText: function(options, select) {
console.log(select[0].length);
if (options.length === 0) {
return 'None selected';
}
if (options.length === select[0].length) {
return 'All selected ('+select[0].length+')';
}
else if (options.length >=1) {
return options.length + ' selected';
}
else {
var labels = [];
console.log(options);
options.each(function() {
labels.push($(this).val());
});
return labels.join(', ') + '';
}
}
});
});