Using jquery to implement select Add the effect of background permissions added _jquery

Uh. Actually, it's a very simple thing. Picture of the page

Two lists can be selected more than one,

Achieve the following effects:

1. Double-click any list item in the first list to add it down

2. Double-click any list item in the second list to implement Delete,

2, click on the button to achieve the corresponding function.

HTML code

Copy Code code as follows:

<form name= "Form1" method= "Post" action= "" >
<select id= "Select1" size= "5" Multiple style= "width:100px" >
<option value= > Beijing </option>
<option value= "222" > Shanghai </option>
<option value= "333" > Guangzhou </option>
<option value= "333" > Shandong </option>
<option value= "333" > Changzhou </option>
</select><br/><br/>
<input type= "button" id= "Button1" value= "Add" >
<input type= "button" id= "Button2" value= "Delete" ><br/><br/>
<select id= "Select2" size= "5" Multiple style= "width:100px" >

</select>
</form>

jquery Code

Copy Code code as follows:

<script src= "Js/jquery-1.6.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#select1"). DblClick (function () {$ ("#select1: Selected"). Appendto ($ ("#select2"));
$ ("#select2"). DblClick (function () {$ ("#select2: Selected"). Appendto ($ ("#select1"));
$ ("#button1"). Click (function () {$ ("#select1 option:selected"). Appendto ($ ("#select2"));
$ ("#button2"). Click (function () {$ ("#select2 option:selected"). Appendto ($ ("#select1"));
})
</script>