·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> 自己写的jQuery 左右选择框，大家多多指教！

【如有意向点此提交需求】关于我们

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

作者：佚名      ASP.NET网站开发编辑：admin      更新时间：2022-07-23

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

Html代码收藏代码
  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE>NewDocument</TITLE>
  5. <METANAME="Generator"CONTENT="EditPlus">
  6. <METANAME="Author"CONTENT="">
  7. <METANAME="KeyWords"CONTENT="">
  8. <METANAME="Description"CONTENT="">
  9. <scripttype="text/javascript"src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
  11. <style>
  12. .sel{width:150px;height:200px;}
  13. .btn{width:50px;font-weight:bold;font-size:14px;}
  14. </style>
  15. </HEAD>
  17. <BODY>
  18. <table>
  19. <tr>
  20. <td>
  21. <selectmultipleclass="sel"id="sel_left">
  22. <optionvalue="a">aaaaaaaaaaa</option>
  23. <optionvalue="b">bbbbbbbbbbb</option>
  24. <optionvalue="c">ccccccccccc</option>
  25. <optionvalue="d">ddddddddddd</option>
  26. <optionvalue="e">eeeeeeeeeee</option>
  27. </select>
  28. </td>
  29. <td>
  30. <p><buttonclass="btn"id="btn_1">&gt;&gt;</button></p>
  31. <p><buttonclass="btn"id="btn_2">&gt;</button></p>
  32. <p><buttonclass="btn"id="btn_3">&lt;</button></p>
  33. <p><buttonclass="btn"id="btn_4">&lt;&lt;</button></p>
  35. </td>
  36. <td>
  37. <selectmultipleclass="sel"id="sel_right">
  38. <optionvalue="f">fffffffffff</option>
  39. </select>
  40. </td>
  41. </tr>
  42. </table>
  43. </BODY>
  44. <script>
  45. $(function(){
  46. $("#sel_left,#sel_right").bind("change",checkBtn);
  47. $("#btn_1,#btn_2,#btn_3,#btn_4").bind("click",clickBtn);
  48. checkBtn();
  49. });
  51. functioncheckBtn(){
  52. jQuery("#sel_left>option").length>0?jQuery("#btn_1").removeAttr("disabled"):jQuery("#btn_1").attr("disabled","disabled");
  53. jQuery("#sel_leftoption:selected").length>0?jQuery("#btn_2").removeAttr("disabled"):jQuery("#btn_2").attr("disabled","disabled");
  54. jQuery("#sel_rightoption:selected").length>0?jQuery("#btn_3").removeAttr("disabled"):jQuery("#btn_3").attr("disabled","disabled");
  55. jQuery("#sel_right>option").length>0?jQuery("#btn_4").removeAttr("disabled"):jQuery("#btn_4").attr("disabled","disabled");
  56. }
  58. functionclickBtn(e){
  59. if("btn_1"==e.target.id){
  60. jQuery("#sel_left>option").appendTo("#sel_right");
  61. }elseif("btn_2"==e.target.id){
  62. jQuery("#sel_leftoption:selected").appendTo("#sel_right");
  63. }elseif("btn_3"==e.target.id){
  64. jQuery("#sel_rightoption:selected").appendTo("#sel_left");
  65. }elseif("btn_4"==e.target.id){
  66. jQuery("#sel_right>option").appendTo("#sel_left");
  67. }
  68. checkBtn();
  69. }
  70. </script>
  71. </HTML>