Bootstrap snippet: select from dual list

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: list



<div class="container bootstrap snippet"> <div class="row"> <div class="col-md-12 text-center text-primary"><h3><span class="glyphicon glyphicon-th-large"></span>Interact with the elements of lists<span class="glyphicon glyphicon-th-large"></span></h3></div> <div class="col-sm-4 col-sm-offset-1"> <div class="list-group" id="list1"> <a href="#" class="list-group-item active"><span class="glyphicon glyphicon-th-large"></span>List 1 <input title="toggle all" type="checkbox" class="all pull-right"></a> <a href="#" class="list-group-item">Second item <input type="checkbox" class="pull-right"></a> <a href="#" class="list-group-item">Third item <input type="checkbox" class="pull-right"></a> <a href="#" class="list-group-item">More item <input type="checkbox" class="pull-right"></a> <a href="#" class="list-group-item">Another <input type="checkbox" class="pull-right"></a> </div> </div> <div class="col-md-2 v-center"> <button title="Send to list 2" class="btn btn-default center-block add"><i class="glyphicon glyphicon-chevron-right"></i></button> <button title="Send to list 1" class="btn btn-default center-block remove"><i class="glyphicon glyphicon-chevron-left"></i></button> </div> <div class="col-sm-4"> <div class="list-group" id="list2"> <a href="#" class="list-group-item active"><span class="glyphicon glyphicon-th-large"></span>List 2 <input title="toggle all" type="checkbox" class="all pull-right"></a> <a href="#" class="list-group-item">Alpha <input type="checkbox" class="pull-right"></a> <a href="#" class="list-group-item">Charlie <input type="checkbox" class="pull-right"></a> <a href="#" class="list-group-item">Bravo <input type="checkbox" class="pull-right"></a> </div> </div> </div> </div>
.v-center { min-height:200px; display: flex; justify-content:center; flex-flow: column wrap; }
$('.add').click(function(){ $('.all').prop("checked",false); var items = $("#list1 input:checked:not('.all')"); var n = items.length; if (n > 0) { items.each(function(idx,item){ var choice = $(item); choice.prop("checked",false); choice.parent().appendTo("#list2"); }); } else { alert("Choose an item from list 1"); } }); $('.remove').click(function(){ $('.all').prop("checked",false); var items = $("#list2 input:checked:not('.all')"); items.each(function(idx,item){ var choice = $(item); choice.prop("checked",false); choice.parent().appendTo("#list1"); }); }); /* toggle all checkboxes in group */ $('.all').click(function(e){ e.stopPropagation(); var $this = $(this); if($this.is(":checked")) { $this.parents('.list-group').find("[type=checkbox]").prop("checked",true); } else { $this.parents('.list-group').find("[type=checkbox]").prop("checked",false); $this.prop("checked",false); } }); $('[type=checkbox]').click(function(e){ e.stopPropagation(); }); /* toggle checkbox when list group item is clicked */ $('.list-group a').click(function(e){ e.stopPropagation(); var $this = $(this).find("[type=checkbox]"); if($this.is(":checked")) { $this.prop("checked",false); } else { $this.prop("checked",true); } if ($this.hasClass("all")) { $this.trigger('click'); } });
Dey-Dey

select from dual list

Dey-Dey
  Jun 5th 2014, 19:09
3.2K Views