<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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">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<span class="glyphicon glyphicon-chevron-right pull-right" aria-hidden="true"></span> </a> <a href="javascript:void(0);" id="btn-remove" name="btn-remove" class="btn btn-primary btn-block"> <span class="glyphicon glyphicon-chevron-left pull-left" aria-hidden="true"></span>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">Up</a> <a href="javascript:void(0);" id="btn-down" class="btn btn-success btn-sm">Down</a> </div> </div> <br/><br/> <input class="" type="submit" value="[ Submit ] will select ALL options in both select boxes ready for submission of the form back to server." /> </fieldset> </form> </div>

$(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>"); $(this).remove(); } }); }); $('#btn-down-source').bind('click', function() { var countOptions = $('#select-from option').size(); $('#select-from option:selected').each( function() { var newPos = $('#select-from option').index(this) + 1; if (newPos < countOptions) { $('#select-from option').eq(newPos).after("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>"); $(this).remove(); } }); }); $('#multi').submit( function () { var selectalla = $('#select-to').val(); if(!selectalla) { $('#select-to option').attr('selected','selected'); } var selectallb = $('#select-from').val(); if(!selectallb) { $('#select-from option').attr('selected','selected'); } }); });