<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;width: 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;width: 250px;" >
</select>
</td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
