<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>Moving Items from One Multi Select List To Another select list using jQuery</h2> </div> <div class="row"> <div class="col-lg-4"> <select id="sbOne" multiple="multiple"> <option value="1">Alpha</option> <option value="2">Beta</option> <option value="3">Gamma</option> <option value="4">Delta</option> <option value="5">Epsilon</option> </select> <div> <input type="button" id="right" value=">" /> <input type="button" id="rightall" value=">>" /> </div> </div> <div class="col-lg-4"> <select id="sbTwo" multiple="multiple"> <option value="6">Zeta</option> <option value="7">Eta</option> </select> <div> <input type="button" id="left" value="<" /> <input type="button" id="leftall" value="<<" /> </div> </div> </div> </div>

$(function () { function moveItems(origin, dest) { $(origin).find(':selected').appendTo(dest); } function moveAllItems(origin, dest) { $(origin).children().appendTo(dest); } $('#left').click(function () { moveItems('#sbTwo', '#sbOne'); }); $('#right').on('click', function () { moveItems('#sbOne', '#sbTwo'); }); $('#leftall').on('click', function () { moveAllItems('#sbTwo', '#sbOne'); }); $('#rightall').on('click', function () { moveAllItems('#sbOne', '#sbTwo'); }); });