zoukankan      html  css  js  c++  java

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

    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://code.jquery.com/jquery-1.4.2.min.js"></script>  
    10.   
    11.   <style>  
    12.   .sel{150px;height:200px;}  
    13.   .btn{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>
  • 相关阅读:
    2017-2018-1 20155326 实验四 外设驱动程序设计
    2017-2018-1 20155326 20155320《信息安全技术》实验四 木马及远程控制技术
    20155326 2017-2018-1 《信息安全系统设计基础》第六章课上考试题
    6月20日云栖精选夜读：阿里怎么发工资？自研薪酬管理系统首次曝光
    一个成功的研发团队应具备的9大属性
    那些创业的艰辛整理
    明明可以靠脸吃饭偏要靠才华_你身边有女神程序员吗？
    程序猿们_一二三四线城市你更愿意选择去哪里工作?
    微服务架构实践之邮件通知系统改造
    谈谈“僵尸猎手小明”手游兼容性踩到的坑
  • 原文地址：https://www.cnblogs.com/xiaochao12345/p/3806449.html
Copyright © 2011-2022 走看看