This article describes the jquery implementation of the Select multiple-selection box to move around the method, the need for friends can refer to the
copy code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/>
<title> Untitled Document </title>
<script type= "Text/javascript" src= "Jquery-1.4.4.min.js" ></script>
<script type= "Text/javascript" >
/**
* Dynamic to the left Drop-down list to create an option
* Details can be read from the database dynamic creation options
*/
$ (document). Ready (function () {
for (var i=1;i<=5;i++)
{
$ ("#fb_list"). Append ("<option value= '" +i+ "' > Public tender for minicomputer purchase" +i+ "</option>");
}
})
$ (function () {
$ ("#add"). Click (function () {
if ($ ("#fb_list option:selected"). length>0)
{
$ ("#fb_list option:selected"). each (function () {
$ ("#select_list"). Append ("<option value=" +$ (This). Val () + "' >" +$ (This). Text () + "</option");
$ (this). Remove ();
})
}
Else
{
alert ("Please select the subcontract you want to add!") ");
}
})
})
$ (function () {
$ ("#delete"). Click (function () {
if ($ ("#select_list option:selected"). length>0)
{
$ ("#select_list option:selected"). each (function () {
$ ("#fb_list"). Append ("<option value=" +$ (This). Val () + "' >" +$ (This). Text () + "</option");
$ (this). Remove ();
})
}
Else
{
alert ("Please select the subcontract you want to delete!") ");
}
})
})
</script>
</head>
<body>
<table width= "0 cellpadding=" align= "center" class= "Listshow" border= "1" cellspacing= "0" >
<tr>
<td colspan= "4" align= "Center" > select sub-Package </td>
</tr>
<tr>
<td class= "Black" width= "30%" align= "center" height= ">
"
<select id= "fb_list" multiple= "multiple" style= "text-align:center;width:300px;height:150px"; ></select>
</td>
<td align= "center" width= "5%" >
<input type= "button" id= "Add" value= "Add >>"/>
<br/>
<br/>
<input type= "button" id= "delete" value= "<< delete"/>
</td>
<td class= "Black" width= "30%" align= "center" >
<select id= "select_list" multiple= "multiple" style= "text-align:center;width:300px;height:150px"; ></select>
</td>
</tr>
</table>
</body>
</html>