自己写的jQuery 左右选择框，大家多多指教！

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2. <HTML>
3. <HEAD>
4. <TITLE> New Document </TITLE>
5. <META NAME="Generator" CONTENT="EditPlus">
6. <META NAME="Author" CONTENT="">
7. <META NAME="Keywords" CONTENT="">
8. <META NAME="Description" CONTENT="">
9. <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
10. <style>
11. .sel{width:150px;height:200px;}
12. .btn{width:50px;font-weight:bold;font-size:14px; }
13. </style>
14. </HEAD>
15. <BODY>
16. <table>
17. <tr>
18. <td>
19. <select multiple class="sel" id="sel_left">
20. <option value="a">aaaaaaaaaaa</option>
21. <option value="b">bbbbbbbbbbb</option>
22. <option value="c">ccccccccccc</option>
23. <option value="d">ddddddddddd</option>
24. <option value="e">eeeeeeeeeee</option>
25. </select>
26. </td>
27. <td>
28. <p><button class="btn" id="btn_1">&gt;&gt; </button></p>
29. <p><button class="btn" id="btn_2">&gt;</button></p>
30. <p><button class="btn" id="btn_3">&lt;</button></p>
31. <p><button class="btn" id="btn_4">&lt;&lt;</button></p>
32. </td>
33. <td>
34. <select multiple class="sel" id="sel_right">
35. <option value="f">fffffffffff</option>
36. </select>
37. </td>
38. </tr>
39. </table>
40. </BODY>
41. <script>
42. $(function(){
43. $("#sel_left,#sel_right").bind("change",checkBtn);
44. $("#btn_1,#btn_2,#btn_3,#btn_4").bind("click",clickBtn);
45. checkBtn();
46. });
47. function checkBtn(){
48. jQuery("#sel_left>option").length > 0 ? jQuery("#btn_1").removeAttr("disabled") : jQuery("#btn_1").attr("disabled","disabled");
49. jQuery("#sel_left option:selected").length > 0 ? jQuery("#btn_2").removeAttr("disabled") : jQuery("#btn_2").attr("disabled","disabled");
50. jQuery("#sel_right option:selected").length > 0 ? jQuery("#btn_3").removeAttr("disabled") : jQuery("#btn_3").attr("disabled","disabled");
51. jQuery("#sel_right>option").length > 0 ? jQuery("#btn_4").removeAttr("disabled") : jQuery("#btn_4").attr("disabled","disabled");
52. }
53. function clickBtn(e){
54. if("btn_1" == e.target.id){
55. jQuery("#sel_left>option").appendTo("#sel_right");
56. }else if("btn_2" == e.target.id){
57. jQuery("#sel_left option:selected").appendTo("#sel_right");
58. }else if("btn_3" == e.target.id){
59. jQuery("#sel_right option:selected").appendTo("#sel_left");
60. }else if("btn_4" == e.target.id){
61. jQuery("#sel_right>option").appendTo("#sel_left");
62. }
63. checkBtn();
64. }
65. </script>
66. </HTML>