-
自己写的jQuery 左右选择框,大家多多指教!
- <!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://code.jquery.com/jquery-1.4.2.min.js"></script>
-
- <style>
- .sel{150px;height:200px;}
- .btn{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>
-
相关阅读:
控制层与视图层传数据
(二)程序异常原因汇总、工具
(十一)C语言中内存堆和栈的区别
(二)再议MII、RMII、GMII接口
(一)MII/MDIO接口详解
(四)单片机系统动态内存分配,任务调度思想
(十)Linux内核中的常用宏container_of
(八)C语言结构体和指针
(七)C语言中的void 和void 指针类型
(六)C语言之typedef详解
-
原文地址:https://www.cnblogs.com/xiaochao12345/p/3806449.html
Copyright © 2020-2023
润新知