"Bootstrap Dual list"
Bootstrap 3.2.0 Snippet by SgtOddball

<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" data-field="list" data-values="1">bootstrap-duallist <a href="https://github.com/bbilginn/bootstrap-duallist" target="_blank">github</a></li> <li class="list-group-item" data-field="list" data-values="2">Dapibus ac facilisis in</li> <li class="list-group-item" data-field="list" data-values="3">Morbi leo risus</li> <li class="list-group-item" data-field="list" data-values="4">Porta ac consectetur ac</li> <li class="list-group-item" data-field="list" data-values="5">Vestibulum at eros</li> </ul> </div> </div> <div class="list-arrows col-md-1 text-center"> <!--Changed to anchors over buttons, otherwise behaves the same--> <a class="btn btn-default btn-sm move-left"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="btn btn-default btn-sm move-right"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </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" data-field="list" data-values="6">Cras justo odio</li> <li class="list-group-item" data-field="list" data-values="7">Dapibus ac facilisis in</li> <li class="list-group-item" data-field="list" data-values="8">Morbi leo risus</li> <li class="list-group-item" data-field="list" data-values="9">Porta ac consectetur ac</li> <li class="list-group-item" data-field="list" data-values="10">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; } /*Changed to use anchor instead of button*/ .list-arrows a { margin-bottom: 20px; }
$(document).ready(function () { //Finds and ammends all boxes in righthand list with hidden inputs based off // data-field and data-values for name and value respectively $('.dual-list.list-right').find('li').each( function () { $(this).append($('<input>').attr({ type: 'hidden', name: $(this).attr('data-field'), value: $(this).attr('data-value') })) } ) }) $(function () { $('body').on('click', '.list-group .list-group-item', function () { $(this).toggleClass('active'); }); //button changed to an anchor to prevent messing around with the buttons //to prevent them submitting a form. $('.list-arrows a').click(function () { var $button = $(this), actives = ''; if ($button.hasClass('move-left')) { //Goes up the dom to find the current list it's working inside of, //This allows multiple lists to be used on the same page without clashes actives = $(this).parent().parent().find($('.list-right ul li.active')); //Again finds the parent div of the button actives.clone().appendTo($(this).parent().parent().find('.list-left ul')); actives.remove(); //Removes any cloned inputs from those just moved accross. $(this).parent().parent().find($('.list-left ul li.active')).find($("input[type='hidden']")).remove(); } else if ($button.hasClass('move-right')) { actives = $(this).parent().parent().find($('.list-left ul li.active')); //Adds in the input field actives.append($('<input>').attr({ type:'hidden', name: actives.attr('data-field'), value: actives.attr('data-value') })) actives.clone().appendTo($(this).parent().parent().find('.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: