select from dual list

This bootstrap snippet select from dual list was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: list

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

.v-center {
  min-height:200px;
  display: flex;
  justify-content:center;
  flex-flow: column wrap;
}
                                    

This is the JS code for this bootstrap snippet

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview

$('.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');
    }
});
 

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.1.1

Created: Jun 1st 2014, 20:02

Views: 4.4K

Rated 5/5 based on 4 reviews