"Double List Box"
Bootstrap 3.3.0 Snippet by fractorr

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <br> <div class="container"> <div class="row"> <div class="dual-list list-right col-md-6"> <div class="well"> <div class="row"> <div class="col-md-12 form-group"> <div class="input-group"> <span class="input-group-addon glyphicon glyphicon-search" style="top: 0px;"></span> <input type="text" name="SearchDualList" class="form-control" placeholder="search"> <span class="input-group-addon glyphicon glyphicon-unchecked selector" style="cursor: pointer; top: 0px;" title="Select All"></span> <span class="input-group-addon glyphicon glyphicon-plus move-left" style="cursor: pointer; top: 0px;" title="Add Selected"></span> </div> </div> </div> <ul class="list-group" id="dual-list-right"> <li class="list-group-item" data-value="6">Option 6</li> <li class="list-group-item" data-value="7">Option 7</li> <li class="list-group-item" data-value="8">Option 8</li> <li class="list-group-item" data-value="9">Option 9</li> <li class="list-group-item" data-value="10">Option 10</li> </ul> </div> </div> <div class="dual-list list-left col-md-6"> <div class="well text-right"> <div class="row"> <div class="col-md-12 form-group"> <div class="input-group"> <span class="input-group-addon glyphicon glyphicon-search" style="top: 0px;"></span> <input type="text" name="SearchDualList" class="form-control" placeholder="search"> <span class="input-group-addon glyphicon glyphicon-unchecked selector" style="cursor: pointer; top: 0px;" title="Select All"></span> <span class="input-group-addon glyphicon glyphicon-minus move-right" style="cursor: pointer; top: 0px;" title="Remove Selected"></span> </div> </div> </div> <ul class="list-group" id="dual-list-left"> <li class="list-group-item" data-value="1">Option 1</li> <li class="list-group-item" data-value="2">Option 2</li> <li class="list-group-item" data-value="3">Option 3</li> <li class="list-group-item" data-value="4">Option 4</li> <li class="list-group-item" data-value="5">Option 5</li> </ul> </div> </div> <select id="dual-list-options" name="dual-list-options[]" multiple="multiple" style="display: none;" size="10"> <option value="1" selected="selected">Option 1</option> <option value="2" selected="selected">Option 2</option> <option value="3" selected="selected">Option 3</option> <option value="4" selected="selected">Option 4</option> <option value="5" selected="selected">Option 5</option> </select> </div> </div>
.list-left li, .list-right li { cursor: pointer; } /* .dual-list .list-group { margin-top: 8px; } .list-arrows button { margin-bottom: 20px; } .left-check-col { padding-left: 0px; } */
$(function () { var move_right = '<span class="glyphicon glyphicon-minus pull-left dual-list-move-right" title="Remove Selected"></span>'; var move_left = '<span class="glyphicon glyphicon-plus pull-right dual-list-move-left " title="Add Selected"></span>'; $(".dual-list.list-left .list-group").sortable({ stop: function( event, ui ) { updateSelectedOptions(); } }); $('body').on('click', '.list-group .list-group-item', function () { $(this).toggleClass('active'); }); $('body').on('click', '.dual-list-move-right', function (e) { e.preventDefault(); actives = $(this).parent(); $(this).parent().find("span").remove(); $(move_left).clone().appendTo(actives); actives.clone().appendTo('.list-right ul').removeClass("active"); actives.remove(); sortUnorderedList("dual-list-right"); updateSelectedOptions(); }); $('body').on('click', '.dual-list-move-left', function (e) { e.preventDefault(); actives = $(this).parent(); $(this).parent().find("span").remove(); $(move_right).clone().appendTo(actives); actives.clone().appendTo('.list-left ul').removeClass("active"); actives.remove(); updateSelectedOptions(); }); $('.move-right, .move-left').click(function () { var $button = $(this), actives = ''; if ($button.hasClass('move-left')) { actives = $('.list-right ul li.active'); actives.find(".dual-list-move-left").remove(); actives.append($(move_right).clone()); actives.clone().appendTo('.list-left ul').removeClass("active"); actives.remove(); } else if ($button.hasClass('move-right')) { actives = $('.list-left ul li.active'); actives.find(".dual-list-move-right").remove(); actives.append($(move_left).clone()); actives.clone().appendTo('.list-right ul').removeClass("active"); actives.remove(); } updateSelectedOptions(); }); function updateSelectedOptions() { $('#dual-list-options').find('option').remove(); $('.list-left ul li').each(function(idx, opt) { $('#dual-list-options').append($("<option></option>") .attr("value", $(opt).data("value")) .text( $(opt).text()) .prop("selected", "selected") ); }); } $('.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(); }); $(".glyphicon-search").on("click", function() { $(this).next("input").focus(); }); function sortUnorderedList(ul, sortDescending) { $("#" + ul + " li").sort(sort_li).appendTo("#" + ul); function sort_li(a, b){ return ($(b).data('value')) < ($(a).data('value')) ? 1 : -1; } } $("#dual-list-left li").append(move_right); $("#dual-list-right li").append(move_left); /* // let the gallery items be draggable $( ".dual-list.list-left .list-group .list-group-item" ).draggable({ cancel: "a.ui-icon", // clicking an icon won't initiate dragging revert: "invalid", // when not dropped, the item will revert back to its initial position containment: "document", helper: "clone", cursor: "move" }); $( ".dual-list.list-right .list-group .list-group-item" ).draggable({ //connectToSortable: ".dual-list.list-right .list-group", cancel: "a.ui-icon", // clicking an icon won't initiate dragging revert: "invalid", // when not dropped, the item will revert back to its initial position containment: "document", helper: "clone", cursor: "move" }); // let the trash be droppable, accepting the gallery items $( ".dual-list.list-right .list-group .list-group-item" ).droppable({ accept: ".dual-list.list-left .list-group .list-group-item", drop: function( event, ui ) { //deleteImage( ui.draggable ); console.log(this); console.log(event); console.log(ui); moveItem(ui.draggable); } }); // let the trash be droppable, accepting the gallery items $( ".dual-list.list-left .list-group .list-group-item" ).droppable({ accept: ".dual-list.list-right .list-group .list-group-item", drop: function( event, ui ) { //deleteImage( ui.draggable ); console.log(this); console.log(event); console.log(ui); moveItem(ui.draggable); } }); // let the gallery be droppable as well, accepting items from the trash $gallery.droppable({ accept: "#trash li", activeClass: "custom-state-active", drop: function( event, ui ) { recycleImage( ui.draggable ); } }); function moveItem(item) { console.log("move item"); console.log($(item)); var from = $(item).closest(".dual-list").hasClass("list-left") ? "left" : "right" var to = $(item).closest(".dual-list").hasClass("list-left") ? "right" : "left" console.log(from, to); if (to == "left") { $(item).find("span.dual-list-move-left").remove(); $(item).append($(move_right).clone()); $(item).appendTo('.list-' + to + ' ul'); } else if (to == "right") { $(item).find("span.dual-list-move-right").remove(); $(item).append($(move_left).clone()); $(item).appendTo('.list-' + to + ' ul'); } } */ });

Related: See More


Questions / Comments: