<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>demo</title>
<script src= "Http://demo.deeka.cn/limit2checked/jquery-1.2.6.pack.js" ></script>
<script>
<!--
$ (function () {
$ ("#s1 Option:first, #s2 option:first"). attr ("selected", true);
$ ("#s1"). DblClick (function () {
$ ("option:selected", this). Clone (). Appendto ("#s2");
$ ("option:selected", this). Remove ();
$ ("#s1 Option:first, #s2 option:first"). attr ("selected", true);
});
$ ("#s2"). DblClick (function () {
$ ("option:selected", this). Clone (). Appendto ("#s1");
$ ("option:selected", this). Remove ();
$ ("#s1 Option:first, #s2 option:first"). attr ("selected", true);
});
$ ("#add"). Click (function () {
$ ("#s1 option:selected"). Clone (). Appendto ("#s2");
$ ("#s1 option:selected"). Remove ();
$ ("#s1 Option:first, #s2 option:first"). attr ("selected", true);
});
$ ("#remove"). Click (function () {
$ ("#s2 option:selected"). Clone (). Appendto ("#s1");
$ ("#s2 option:selected"). Remove ();
$ ("#s1 Option:first, #s2 option:first"). attr ("selected", true);
});
$ ("#addall"). Click (function () {
$ ("#s1 option"). Clone (). Appendto ("#s2");
$ ("#s1 option"). Remove ();
$ ("#s1 Option:first, #s2 option:first"). attr ("selected", true);
});
$ ("#removeall"). Click (function () {
$ ("#s2 option"). Clone (). Appendto ("#s1");
$ ("#s2 option"). Remove ();
$ ("#s1 Option:first, #s2 option:first"). attr ("selected", true);
});
$ ("#s1up"). Click (function () {
var so = $ ("#s1 option:selected");
if (so.get (0). index!=0) {
So.each (function () {
$ (this). Prev (). Before ($ (this));
});
}
});
$ ("#s1down"). Click (function () {
var alloptions = $ ("#s1 option");
var so = $ ("#s1 option:selected");
if (So.get (so.length-1). index!=alloptions.length-1) {
for (i=so.length-1;i>=0;i--)
{
var item = $ (So.get (i));
Item.insertafter (Item.next ());
}
}
});
$ ("#s2up"). Click (function () {
var so = $ ("#s2 option:selected");
if (so.get (0). index!=0) {
So.each (function () {
$ (this). Prev (). Before ($ (this));
});
}
});
$ ("#s2down"). Click (function () {
var alloptions = $ ("#s2 option");
var so = $ ("#s2 option:selected");
if (So.get (so.length-1). index!=alloptions.length-1) {
for (i=so.length-1;i>=0;i--)
{
var item = $ (So.get (i));
Item.insertafter (Item.next ());
}
}
});
});
-->
</script>
<body>
<table width= "border=" 0 "cellpadding=" 0 "cellspacing=" 0 ">
<tr>
<TD width= ">"
<input type= "button" Name= "S1up" id= "s1up" value= "↑"/><br/>
<input type= "button" Name= "S1down" id= "S1down" value= "↓"/></td>
<TD width= "><select name=" S1 "size=" "multiple=" "multiple" "id=" S1 "style=" "width:100px". >
<option value= "opt01" >option01</option>
<option value= "opt02" >option02</option>
<option value= "opt03" >option03</option>
<option value= "opt04" >option04</option>
<option value= "opt05" >option05</option>
<option value= "opt06" >option06</option>
<option value= "opt07" >option07</option>
<option value= "opt08" >option08</option>
<option value= "opt09" >option09</option>
<option value= "Opt10" >option10</option>
</select></td>
<TD width= "Notoginseng" align= "center" ><input type= "button" Name= "AddAll" id= "AddAll" value= ">|"/><br/> <input type= "button" name= "Add" id= "Add" value= ">>"/><br/><input "button" type= "Remove" name= "Remove" value= "<<"/><br/><input type= "button" Name= "RemoveAll" id= "RemoveAll" value= "|<"/> </td>
<TD width= "><select name=" S2 "size=" "multiple=" "multiple" "id=" S2 "style=" "width:100px". >
</select></td>
<TD width= "119" >
<input type= "button" Name= "S2up" id= "S2up" value= "↑"/><br/>
<input type= "button" Name= "S2down" id= "S2down" value= "↓"/></td>
</tr>
</table>
<p> support Direct Double-click Add/Remove, up/down (support interval) sort </p>
</body>
