jquery实现左右选择框

最新推荐文章于 2021-09-22 15:05:55 发布

whazhl

最新推荐文章于 2021-09-22 15:05:55 发布

阅读量1.1k

点赞数

分类专栏： jquery 文章标签： jquery

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、效果图

二、实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML>  
 <HEAD>  
  <TITLE> New Document </TITLE>  
  <META NAME="Generator" CONTENT="EditPlus">  
  <META NAME="Author" CONTENT="">  
  <META NAME="Keywords" CONTENT="">  
  <META NAME="Description" CONTENT="">  
  <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>  
  
  <style>  
  .sel{}{width:150px;height:200px;}  
  .btn{}{width:50px;font-weight:bold;font-size:14px; }  
  </style>  
 </HEAD>  
  
 <BODY>  
 <table>  
    <tr>  
        <td>  
          <select multiple class="sel" id="sel_left">  
            <option value="a">aaaaaaaaaaa</option>  
            <option value="b">bbbbbbbbbbb</option>  
            <option value="c">ccccccccccc</option>  
            <option value="d">ddddddddddd</option>  
            <option value="e">eeeeeeeeeee</option>  
          </select>  
        </td>  
        <td>    
            <p><button class="btn" id="btn_1">>> </button></p>  
            <p><button class="btn" id="btn_2">></button></p>  
            <p><button class="btn" id="btn_3"><</button></p>  
            <p><button class="btn" id="btn_4"><<</button></p>  
              
        </td>  
        <td>  
             <select multiple class="sel" id="sel_right">  
             <option value="f">fffffffffff</option>  
             </select>  
        </td>  
    </tr>  
</table>  
 </BODY>  
   <script>  
  $(function(){  
    $("#sel_left,#sel_right").bind("change",checkBtn);  
    $("#btn_1,#btn_2,#btn_3,#btn_4").bind("click",clickBtn);  
    checkBtn();  
    });  
      
    function checkBtn(){  
        jQuery("#sel_left>option").length > 0 ? jQuery("#btn_1").removeAttr("disabled") : jQuery("#btn_1").attr("disabled","disabled");  
        jQuery("#sel_left option:selected").length > 0 ? jQuery("#btn_2").removeAttr("disabled") : jQuery("#btn_2").attr("disabled","disabled");  
        jQuery("#sel_right option:selected").length > 0 ? jQuery("#btn_3").removeAttr("disabled") : jQuery("#btn_3").attr("disabled","disabled");  
        jQuery("#sel_right>option").length > 0 ? jQuery("#btn_4").removeAttr("disabled") : jQuery("#btn_4").attr("disabled","disabled");  
    }  
      
    function clickBtn(e){  
        if("btn_1" == e.target.id){  
            jQuery("#sel_left>option").appendTo("#sel_right");  
        }else if("btn_2" == e.target.id){  
            jQuery("#sel_left option:selected").appendTo("#sel_right");  
        }else if("btn_3" == e.target.id){  
            jQuery("#sel_right option:selected").appendTo("#sel_left");  
        }else if("btn_4" == e.target.id){  
            jQuery("#sel_right>option").appendTo("#sel_left");  
        }  
        checkBtn();  
    }  
  </script>  
</HTML>

文章转载自： jquery左右选择框 http://www.studyofnet.com/news/775.html

whazhl

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery实现左右选择框

一、效果图二、实现 New Document .sel{}{width:150px;height:200px;} .btn{}{width:50px;font-weight:bold;font-size:14px; }
复制链接

扫一扫

专栏目录