当前位置:首 页 > 技术文章 > 转载 > 详细

jquery制作select列表双向选择示例代码

字号字号

摘要: 看着标题就知道它是什么意思了,select列表双向选择,jquery制作的,兼容性肯定是不错的 jquery制作的select列表双向选择,兼容性肯定是不错的,需要的朋友可以学习下view sourceprint? 01 <……

  看着标题就知道它是什么意思了,select列表双向选择,jquery制作的,兼容性肯定是不错的

  jquery制作的select列表双向选择,兼容性肯定是不错的,需要的朋友可以学习下

01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
02 <HTML>
03 <HEAD>
04 <TITLE> New Document </TITLE>
05 <META NAME="Generator" CONTENT="EditPlus">
06 <META NAME="Author" CONTENT="">
07 <META NAME="Keywords" CONTENT="">
08 <META NAME="Description" CONTENT="">
09 <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">>> </button></p>
31 <p><button class="btn" id="btn_2">></button></p>
32 <p><button class="btn" id="btn_3"><</button></p>
33 <p><button class="btn" id="btn_4"><<</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>
  • 添加[Admin-3]
  • 浏览[1951]
  • ▼评论[0]
这是留给你的位置,说出你的真知灼见吧![我要评论][我要收藏][我要举报]