Bootstrap Snippet "Double List Box" using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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;
}
*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

""Double List Box""
Bootstrap 3.3.0 Snippet by meedun

Related: See More

Questions / Comments:

""Double List Box"" Bootstrap 3.3.0 Snippet by meedun

Related: See More

Questions / Comments:

""Double List Box""
Bootstrap 3.3.0 Snippet by meedun