"Move Selected items"
Bootstrap 4.1.1 Snippet by tibbz

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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Move data between 2 selects and sort</h2>
</div>
<form id="multi">
<fieldset>
<div class="row">
<div class="col-md-5">
<select name="selectfrom" id="select-from" multiple="multiple" size="9" class="form-control">
<option value="1">Option 1.1</option>
<option value="2">Option 1.2</option>
<option value="2">Option 1.3</option>
<option value="2">Option 1.4</option>
<option value="2">Option 1.5</option>
</select>
<a href="javascript:void(0);" id="btn-up-source" class="btn btn-success btn-sm">Move Up</a>
<a href="javascript:void(0);" id="btn-down-source" class="btn btn-success btn-sm">Down</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" id="btn-add" name="btn-add" class="btn btn-primary btn-block">
>> Move >>
</a>
<a href="javascript:void(0);" id="btn-remove" name="btn-remove" class="btn btn-primary btn-block">
<< Move <<
</a>
</div>
<div class="col-md-5">
<select name="selectto" id="select-to" multiple="multiple" size="9" class="form-control">
</select>
<a href="javascript:void(0);" id="btn-up" class="btn btn-success btn-sm">Move Up</a>
<a href="javascript:void(0);" id="btn-down" class="btn btn-success btn-sm">Move Down</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
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
$(document).ready(function() {
$('#btn-add').click(function(){
$('#select-from option:selected').each( function() {
$('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
});
});
$('#btn-remove').click(function(){
$('#select-to option:selected').each( function() {
$('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
});
});
$('#btn-up').bind('click', function() {
$('#select-to option:selected').each( function() {
var newPos = $('#select-to option').index(this) - 1;
if (newPos > -1) {
$('#select-to option').eq(newPos).before("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
$(this).remove();
}
});
});
$('#btn-down').bind('click', function() {
var countOptions = $('#select-to option').size();
$('#select-to option:selected').each( function() {
var newPos = $('#select-to option').index(this) + 1;
if (newPos < countOptions) {
$('#select-to option').eq(newPos).after("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
$(this).remove();
}
});
});
$('#btn-up-source').bind('click', function() {
$('#select-from option:selected').each( function() {
var newPos = $('#select-from option').index(this) - 1;
if (newPos > -1) {
$('#select-from option').eq(newPos).before("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: