"Bootstrap Dual list"
Bootstrap 3.2.0 Snippet by bbilginn

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <br /> <div class="row"> <div class="dual-list list-left col-md-5"> <div class="well text-right"> <div class="row"> <div class="col-md-10"> <div class="input-group"> <span class="input-group-addon glyphicon glyphicon-search"></span> <input type="text" name="SearchDualList" class="form-control" placeholder="search" /> </div> </div> <div class="col-md-2"> <div class="btn-group"> <a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a> </div> </div> </div> <ul class="list-group"> <li class="list-group-item">bootstrap-duallist <a href="https://github.com/bbilginn/bootstrap-duallist" target="_blank">github</a></li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div> </div> <div class="list-arrows col-md-1 text-center"> <button class="btn btn-default btn-sm move-left"> <span class="glyphicon glyphicon-chevron-left"></span> </button> <button class="btn btn-default btn-sm move-right"> <span class="glyphicon glyphicon-chevron-right"></span> </button> </div> <div class="dual-list list-right col-md-5"> <div class="well"> <div class="row"> <div class="col-md-2"> <div class="btn-group"> <a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a> </div> </div> <div class="col-md-10"> <div class="input-group"> <input type="text" name="SearchDualList" class="form-control" placeholder="search" /> <span class="input-group-addon glyphicon glyphicon-search"></span> </div> </div> </div> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div> </div> </div> </div>
.dual-list .list-group { margin-top: 8px; } .list-left li, .list-right li { cursor: pointer; } .list-arrows { padding-top: 100px; } .list-arrows button { margin-bottom: 20px; }
$(function () { $('body').on('click', '.list-group .list-group-item', function () { $(this).toggleClass('active'); }); $('.list-arrows button').click(function () { var $button = $(this), actives = ''; if ($button.hasClass('move-left')) { actives = $('.list-right ul li.active'); actives.clone().appendTo('.list-left ul'); actives.remove(); } else if ($button.hasClass('move-right')) { actives = $('.list-left ul li.active'); actives.clone().appendTo('.list-right ul'); actives.remove(); } }); $('.dual-list .selector').click(function () { var $checkBox = $(this); if (!$checkBox.hasClass('selected')) { $checkBox.addClass('selected').closest('.well').find('ul li:not(.active)').addClass('active'); $checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check'); } else { $checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active'); $checkBox.children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked'); } }); $('[name="SearchDualList"]').keyup(function (e) { var code = e.keyCode || e.which; if (code == '9') return; if (code == '27') $(this).val(null); var $rows = $(this).closest('.dual-list').find('.list-group li'); var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rows.show().filter(function () { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(val); }).hide(); }); });

Related: See More


Questions / Comments:

well written code for the specified purpose. Thanks Alot

Amish Kumar () - 1 year ago - Reply 0


thank you for you sharing. it is a awesome teamplte

yequan zhang () - 2 years ago - Reply 0


Great Work , how i get the left list itens on a submit?

Vitor () - 3 years ago - Reply 0


how does one use multiple of these on the same page without it adding the list items in the left to the same list in the right?

txtBux () - 3 years ago - Reply 0


I'd also like to know how to extend this so the right list become a form value that can be submitted.

Anthony Banwell () - 3 years ago - Reply 0


Is it possible to install this code?

aripal () - 3 years ago - Reply 0


Nice job! Somebody knows how to post the right content selection? I tried to add an <input type="hidden" name="rightselection[]" value=""> after <div class="dual-list list-left col-md-5">, but that doesn't function. Thanks for your help :-)

rookie () - 3 years ago - Reply 0


Only issue I see with this is if you select all and then deselect an item, shouldn't the select all check go away? otherwise, really nice work.

Fred Malone () - 3 years ago - Reply 0


Cool, this is great job..

Maria del Carmen () - 4 years ago - Reply 0


Such a nice work, i congratulate you for some excelent code

Anon () - 4 years ago - Reply 0


Nice :D

Jlndk () - 4 years ago - Reply 0


Nice & useful

Antonio Pereira () - 4 years ago - Reply 0