<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"> <h4>How to move selected items from one dropdown group list (optgroup)to another dropdown group list (optgroup) using jquery?</h4> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-6"> <select name="AvailableFields" id="AvailableFields" multiple="multiple" size="10"> <option value="">Please select</option> <optgroup label="Group A"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </optgroup> <optgroup label="Group B"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> </optgroup> </select> <div> <button type="button" title="Forward" id="btnRight">Move Right</button> </div> </div> <div class="col-lg-6 col-md-6"> <select name="FieldstoBeMatchedOn" id="FieldstoBeMatchedOn" multiple="multiple" size="10"> </select> <div> <button type="button" title="Backward" id="btnLeft">Move Left</button> </div> </div> </div> </div>

$(document).ready(function () { $('#btnRight').click(function (e) { var selectedOpts = $('#AvailableFields option:selected'); if (selectedOpts.length == 0) { alert("Nothing to move."); e.preventDefault(); } if(selectedOpts.parent().attr('label') == "Group A"){ $('#FieldstoBeMatchedOn').append($(selectedOpts).clone()); $(selectedOpts).remove(); defaultSelect(); e.preventDefault(); } else{ $('#FieldstoBeMatchedOn').append($(selectedOpts).clone()); $(selectedOpts).remove(); defaultSelect(); e.preventDefault(); } }); $('#btnLeft').click(function (e) { var selectedOpts = $('#FieldstoBeMatchedOn option:selected'); if (selectedOpts.length == 0) { alert("Nothing to move."); e.preventDefault(); } $('#AvailableFields').append($(selectedOpts).clone()); $(selectedOpts).remove(); defaultSelect(); e.preventDefault(); }); defaultSelect = function () { $("#FieldstoBeMatchedOn option").each(function () { $(this).prop("selected", true); }); } });