群组首页 → Web前端 → javascript研究小组 → 论坛
发表回复

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

agevs 2014-08-25

Ui框架分享

.代码  收藏代码
  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.     
  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="a">aaaaaaaaaaa</option>    
  23.             <option value="b">bbbbbbbbbbb</option>    
  24.             <option value="c">ccccccccccc</option>    
  25.             <option value="d">ddddddddddd</option>    
  26.             <option value="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="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>  
发表回复
Global site tag (gtag.js) - Google Analytics