Copy codeThe Code is as follows: <Title> No title page </title>
<Script type = "text/javascript" src = "js/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
// Append the selected item to the other party
$ ('# Add'). click (function (){
Var options = $ ('# select1 option: selected ');
Var remove = options. remove ();
Remove. appendTo ("# select2 ");
});
// Append all items to the other party
$ ('# Addall'). click (function (){
Var options = $ ('# select1 option ');
Var remove = options. remove ();
Remove. appendTo ("# select2 ");
});
// Return the selected item to the other party
$ ('# Delete'). click (function (){
Var options = $ ('# select2 option: selected ');
Var remove = options. remove ();
Remove. appendTo ("# select1 ");
});
// Return all items to the other party
$ ('# RemoveAll'). click (function (){
Var options = $ ('# select2 option ');
Var remove = options. remove ();
Remove. appendTo ("# select1 ");
});
});
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div id = "left">
<Select multiple = "multiple" id = "select1" style = "width: 100px; height: 160px">
<Option> option 1 </option>
<Option> option 2 </option>
<Option> option 3 </option>
<Option> option 4 </option>
<Option> option 5 </option>
</Select>
</Div>
<Div>
<Span id = "add"> add selected items to the right >></span> <br/>
<Span id = "addAll"> Add all to the right >></span>
</Div>
<Div id = "right">
<Select multiple = "multiple" id = "select2" style = "width: 100px; height: 160px"> </select>
</Div>
<Div>
<Span id = "remove"> <the selected item is restored to the left </span> <br/>
<Span id = "removeAll"> <restore all to the left </span>
</Div>
</Form>
</Body>