Twitter Bootstrap: dropdown
HTML
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<div class="dropdown">
</div>
<div class="btn-group"> <a class="btn btn-sm" href="#" style="width:200px;text-align:right;background-color:white;border-color:lightgray">choose an action</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">
<input type="checkbox" class="dropdown_item" value='30' checked><font color="blue">Edit</font>
</a>
</li>
<li><a href="#"><input type="checkbox" class="dropdown_item" value='40'> Delete</a>
</li>
<li><a href="#"><input type="checkbox" class="dropdown_item" value='40'> Ban</a>
</li>
<li class="divider"></li>
<li><a href="#"><input type="checkbox" class="dropdown_toggle_all"><font color="olive">Select All/Clear All</font></a>
</li>
</ul>
</div>
</div>
<button>
aaa</button>
</button>
JavaScript
$('.dropdown_item').on('click', function(event){
//event.preventDefault();
event.stopPropagation();
})
$('.dropdown_toggle_all').click(function(){
event.stopPropagation();
$(this).closest('.dropdown-menu').find('.dropdown_item').prop('checked',$(this).prop('checked'));
var container = $(this).closest('.dropdown-menu');
// Take the checked boxes and gather em up
var labels = [];
var values = [];
container.find('input[type=checkbox].dropdown_item:checked').each(function(item){
labels.push($(this).closest('a').text().trim());
values.push($(this).val());
});
// Now set the UI
if( values.length > 200 ){
container.find('.dropdown-toggle').html(labels.length+' selected');
}else if( values.length > 0 ){
container.find('.dropdown-toggle').html(labels.join(', '));
}else{
container.find('.dropdown-toggle').html(container.data('default-label'));
}
});