<head> <title> </title> <!--Standard jQuery --> <script type="text/javascript" src="https://code.jquery.com/jquery-git2.js" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function() { $('#boxClear').click(function(){ $('#firstFilterSearch').val(''); }); $('#firstFilterSearch').keyup(function() { var searchArea = $('#firstList'); searchFirstList($(this).val(), searchArea); }); $('#firstList').dblclick(function() { assignList(); }); $('#secondList').dblclick(function() { unassignList(); }); $('#to2').click(function() { assignList(); }); $('#to1').click(function() { unassignList(); }); }); // Function for Filtering function searchFirstList(inputVal, searchArea) { var allCells = $(searchArea).find('option'); if(allCells.length > 0) { var found = false; allCells.each(function(index, option) { var regExp = new RegExp(inputVal, 'i'); if(regExp.test($(option).text())) { $(option).show(); } else { $(option).hide(); } }); } } // function: UnAssignment function assignList() { $('#firstList :selected').each(function(i, selected){ // append to second list box $('#secondList').append('<option value="'+selected.value+'">'+ selected.text+'</option>'); // remove from first list box $("#firstList option[value='"+ selected.value +"']").remove(); }); } // function: UnAssignment function unassignList() { $('#secondList :selected').each(function(i, selected){ // append to first list box $('#firstList').append('<option value="'+selected.value+'">'+ selected.text+'</option>'); // remove from second list box $("#secondList option[value='"+ selected.value +"']").remove(); }); } </script> </head> <body> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="100%"> <form id="frm_format" method="" action=""> <table cellpadding="0" id="tbl_format"cellspacing="0" border="0" width="100%" class="standard_table_v4"> <thead> </thead> <tbody> <tr> <td> <td align="center"> Filter: <input id="firstFilterSearch" type="text"> <input type="button" id="boxClear" name="boxClear" value="Cancel"><br> <select id="firstList" multiple="multiple" style="height:420px; 250px;" > <option value="1">PHP</option> <option value="2">.Net</option> <option value="3">Copy</option> <option value="4">Paste</option> <option value="5">Pea</option> <option value="6">Pamp</option> <option value="7">ladaku</option> <option value="8">Zebra</option> </select> </td> <td align="center"> <input id="to2" type="button" name="to2" title='assign' value=">" /><br/><br/> <input id="to1" type="button" name="to1" title='unassign' value="<"> </td> <td> <select id="secondList" multiple="multiple" style="height:420px; 250px;" > </select> </td> </tr> </tbody> </table> </form> </td> </tr> </table> </body> </html>