Skip to content

Instantly share code, notes, and snippets.

@jculverwell

jculverwell/Twitter Bootstrap_multi_select_dropdown.html

Created October 24, 2012 02:14
Show Gist options
  • Star 14 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save jculverwell/3943327 to your computer and use it in GitHub Desktop.
Save jculverwell/3943327 to your computer and use it in GitHub Desktop.
Download ZIP
Twitter Bootstrap multi select dropdown
Raw
Twitter Bootstrap_multi_select_dropdown.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
/* Multi select - allow multiple selections */
/* Allow click without closing menu */
/* Toggle checked state and icon */
$('.multicheck').click(function(e) {
$(this).toggleClass("checked");
$(this).find("span").toggleClass("icon-ok");
return false;
});
/* Single Select - allow only one selection */
/* Toggle checked state and icon and also remove any other selections */
$('.singlecheck').click(function (e) {
$(this).parent().siblings().children().removeClass("checked");
$(this).parent().siblings().children().find("span").removeClass("icon-ok");
$(this).toggleClass("checked");
$(this).find("span").toggleClass("icon-ok");
return false;
});
/* To check whether an item is checked use the hasClass method */
alert($("#chkB").hasClass("checked"));
});
</script>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Multi Select<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="chkA" class="multicheck" href="#">Test A
<span class="pull-right"></span></a></li>
<li><a id="chkB" class="multicheck checked" href="#">Test B
<span class="icon-ok pull-right"></span></a></li>
<li><a id="chkC" class="multicheck checked" href="#">Test C
<span class="icon-ok pull-right"></span></a></li>
<li><a id="chkD" class="multicheck checked" href="#">Test D
<span class="icon-ok pull-right"></span></a></li>
<div class="clearfix"></div>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Single Select<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="chkA" class="singlecheck" href="#">Test A
<span class="pull-right"></span></a></li>
<li><a id="chkB" class="singlecheck checked" href="#">Test B
<span class="icon-ok pull-right"></span></a></li>
<li><a id="chkC" class="singlecheck checked" href="#">Test C
<span class="icon-ok pull-right"></span></a></li>
<li><a id="chkD" class="singlecheck checked" href="#">Test D
<span class="icon-ok pull-right"></span></a></li>
<div class="clearfix"></div>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
@ermand
Copy link

ermand commented Feb 3, 2013

Thanks mate. It was useful to me.

@1st
Copy link

1st commented Apr 12, 2013

Good idea. I try to redesign dome things in Django admin. Maybe this approach will be good. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment