A simple jquery left and right list content switching app

Select one of the options on the left to add, you can add the selected items to the right text box, click to select All to move all options to the right, the Remove button function is the same.

HTML code:

1 <DivID= "Main">2     <DivID= "Left">3         <DivID= "Select1"class= "SEL">4             <span>Apple</span>5             <span>Huawei</span>6             <span>Htc</span>7             <span>Samsung</span>8         </Div>9         <ButtonID= "Add"value= "Check Add">Check Add</Button><BR>Ten         <ButtonID= "Add_all"value= "Check All">Select All</Button> One     </Div> A     <DivID= "Right"> -         <DivID= "Select2"class= "SEL"> -              the         </Div> -         <ButtonID= "Remove"value= "Remove add">Remove add</Button><BR> -         <ButtonID= "Remove_all"value= "Remove All">Remove all</Button> -     </Div> + </Div>

Css:

1 <style type= "Text/css" >2 . Sel{3 width:100px;4 Height:160px;5 Border:1px solid Black;6}7 span{8 Display:Block;9}Ten #left, #right{ One float: Left; A Border:1px solid Black; - Margin-right:20px; -} the . Light{ - Background-color:Blue; -} - </style>

Jquery:

1<script type= "Text/javascript" >2$ (' span '). Click (function(){3$( This). AddClass ("Light"). Siblings (). Removeclass ("Light");//When you click the Span tab, add a highlight style light to it, and remove the light attribute of the sibling tag except for the selected item;4     });5$ ("#add"). Click (function(){6         varoptions=$ ("#select1 >.light");//gets the selected item;7Options.removeclass ("Light"). AppendTo ("#select2");//Remove the Light property of the span label and move it to the right;8 9     });Ten$ ("#add_all"). Click (function(){ One         varoptions=$ ("#select1 span"); AOptions.appendto ("#select2"); -     }); -$ ("#remove"). Click (function(){ the         varoptions=$ (". Light")); -Options.removeclass ("Light"). AppendTo ("#select1"); -     }); -$ ("#remove_all"). Click (function(){ +         varoptions=$ ("#select2 span"); -Options.appendto ("#select1"); +     }); A</script>

A simple jquery left and right list content switching app