<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>
<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>
Implement the move and filter of item between two select list box