How to move items between two select lists? i.e, On selecting ""heading test"" and click button, I want to move the item(""heading test"") to listbox2. (the complete ul,li tag) Working code pen link:- https://codepen.io/dhanunjayt/pen/GRxMpBX At present issue is, i am unable to move item from one to another,
<div class="data_wrap list-padding"> <div class="approveTermsContainer"> <div class="newItems"> AVAILABLE <br /> <select multiple="multiple" id='lstBox1'> <ul class="tree" multiple="multiple" id='lstBox1'> <li> <div class="btn-group" data-toggle="buttons"> </div> <a href="">heading test</a> <ul> <li> <div class="btn-group" data-toggle="buttons"> </div> test <span rel="tooltip" data-toggle="tooltip" data-trigger="hover" data-placement="right" data-html="true" data-title="This is my tooltip!">class="fa fa-info- circle"></span> </li> </ul> </li> </ul> </select> </div> <div class="transferBtns"> <input type='button' id='btnRight' value=' > ' /> <br /> <input type='button' id='btnLeft' value=' < ' /> </div> <div class="approvedItems"> ^__b>INCLUDED <br /> <select multiple="multiple" id='lstBox2'> </select> </div> </div> </div>
$(document).ready(function () { $('#btnRight').click(function (e) { var selectedOpts = $('#lstBox1 option:selected'); if (selectedOpts.length == 0) { alert("Nothing to move."); e.preventDefault(); } $('#lstBox2').append($(selectedOpts).clone()); $(selectedOpts).remove(); e.preventDefault(); }); $('#btnLeft').click(function (e) { var selectedOpts = $('#lstBox2 option:selected'); if (selectedOpts.length == 0) { alert("Nothing to move."); e.preventDefault(); } $('#lstBox1').append($(selectedOpts).clone()); $(selectedOpts).remove(); e.preventDefault(); }); });
<select>
<option>
<optgroup>
<ul>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)