首页 > 代码库 > 自己写的jQuery 左右选择框，大家多多指教！

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

2024-07-09 10:35:24   224人阅读

Html代码  收藏代码
  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://www.mamicode.com/"http://code.jquery.com/jquery-1.4.2.min.js"></script>  
  10.   
  11.   <style>  
  12.   .sel{width:150px;height:200px;}  
  13.   .btn{width:50px;font-weight:bold;font-size:14px; }  
  14.   </style>  
  15.  </HEAD>  
  16.   
  17.  <BODY>  
  18.  <table>  
  19.     <tr>  
  20.         <td>  
  21.           <select multiple class="sel" id="sel_left">  
  22.             <option value=http://www.mamicode.com/"a">aaaaaaaaaaa</option>  
  23.             <option value=http://www.mamicode.com/"b">bbbbbbbbbbb</option>  
  24.             <option value=http://www.mamicode.com/"c">ccccccccccc</option>  
  25.             <option value=http://www.mamicode.com/"d">ddddddddddd</option>  
  26.             <option value=http://www.mamicode.com/"e">eeeeeeeeeee</option>  
  27.           </select>  
  28.         </td>  
  29.         <td>    
  30.             <p><button class="btn" id="btn_1">&gt;&gt; </button></p>  
  31.             <p><button class="btn" id="btn_2">&gt;</button></p>  
  32.             <p><button class="btn" id="btn_3">&lt;</button></p>  
  33.             <p><button class="btn" id="btn_4">&lt;&lt;</button></p>  
  34.               
  35.         </td>  
  36.         <td>  
  37.              <select multiple class="sel" id="sel_right">  
  38.              <option value=http://www.mamicode.com/"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.     });  
  50.       
  51.     function checkBtn(){  
  52.         jQuery("#sel_left>option").length > 0 ? jQuery("#btn_1").removeAttr("disabled") : jQuery("#btn_1").attr("disabled","disabled");  
  53.         jQuery("#sel_left option:selected").length > 0 ? jQuery("#btn_2").removeAttr("disabled") : jQuery("#btn_2").attr("disabled","disabled");  
  54.         jQuery("#sel_right option: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.     }  
  57.       
  58.     function clickBtn(e){  
  59.         if("btn_1" == e.target.id){  
  60.             jQuery("#sel_left>option").appendTo("#sel_right");  
  61.         }else if("btn_2" == e.target.id){  
  62.             jQuery("#sel_left option:selected").appendTo("#sel_right");  
  63.         }else if("btn_3" == e.target.id){  
  64.             jQuery("#sel_right option:selected").appendTo("#sel_left");  
  65.         }else if("btn_4" == e.target.id){  
  66.             jQuery("#sel_right>option").appendTo("#sel_left");  
  67.         }  
  68.         checkBtn();  
  69.     }  
  70.   </script>  
  71. </HTML>


联系
我们