最近做一个报表页面显示位置配置的界面,刚开始时用的是多个checkbox,选择其中需要的报表即可。
后来随着业务变复杂，需要使用两个select,选择其中需要的到右边select，然后提交到数据库。
以前总想到网上找一个这样的，但是一直没有找到,所以我自己写了一个。希望能帮助到看到的童鞋。
如果谁有更强大的插件，跟我留一个地址，非常感谢!
效果如下:
代码如下:
1 (function($){ 2 $.fn.selectToSelect=function(options){ 3 if($.type(options)=="string"){ 4 var $this=$(this); 5 if(options=="getSelectedIds"){ 6 var ids=""; 7 var arr=$("#"+$this.attr("id")+"seReSelect option"); 8 arr.each(function(i){ 9 if(arr.length-1==i){ 10 ids+=$(this).attr("id"); 11 }else{ 12 ids+=$(this).attr("id")+","; 13 } 14 }); 15 return ids; 16 } 17 return $this; 18 } 19 var defaults={ 20 size:10, 21 opSelect:[], 22 opReSelect:[], 23 onChange:function(data){} 24 }; 25 var opts= $.extend(defaults,options); 26 return this.each(function(){ 27 var $this=$(this); 28 var str="<table>"; 29 str+="<tr>"; 30 str+="<td style='vertical-align: top;'>"; 31 str+="<select id='"+$this.attr("id")+"seSelect' multiple='multiple' size='"+opts.size+"'>"; 32 for(var i=0;i<opts.opSelect.length;i++){ 33 str+="<option name='"+$this.attr("id")+"opSelect' id='"+opts.opSelect[i].id+"' value='"+opts.opSelect[i].id+"'>"+opts.opSelect[i].name+"</option>" 34 } 35 str+="</select>"; 36 str+="</td>"; 37 str+="<td style='vertical-align: top;'> "; 38 str+="<table>"; 39 str+=" <tr>"; 40 str+=" <td><button id='"+$this.attr("id")+"btnSelectAll' type='button'>>></button></td>"; 41 str+=" </tr>"; 42 str+=" <tr>"; 43 str+=" <td><button id='"+$this.attr("id")+"btnSelectOne' type='button'> ></button></td>"; 44 str+=" </tr>"; 45 str+=" <tr><td style='height: 50px;'></td></tr>"; 46 str+=" <tr> "; 47 str+=" <td><button id='"+$this.attr("id")+"btnReSelectOne' type='button'>< </button></td>"; 48 str+=" </tr> "; 49 str+=" <tr> "; 50 str+=" <td><button id='"+$this.attr("id")+"btnReSelectAll' type='button'><<</button></td> "; 51 str+=" </tr> "; 52 str+="</table>"; 53 str+="</td>"; 54 str+="<td style='vertical-align: top;'>"; 55 str+=" <select id='"+$this.attr("id")+"seReSelect' multiple='multiple' size='"+opts.size+"'> "; 56 for(var i=0;i<opts.opReSelect.length;i++){ 57 str+="<option name='"+$this.attr("id")+"opReSelect' id='"+opts.opReSelect[i].id+"' value='"+opts.opReSelect[i].id+"'>"+opts.opReSelect[i].name+"</option>" 58 } 59 str+=" </select>"; 60 str+="</td>"; 61 str+="<td style='vertical-align: top;'> "; 62 str+=" <table> "; 63 str+=" <tr> "; 64 str+=" <td><button id='"+$this.attr("id")+"btnUp' type='button'>↑</button></td> "; 65 str+=" </tr> "; 66 str+=" <tr> "; 67 str+=" <td><button id='"+$this.attr("id")+"btnDown' type='button'>↓</button></td> "; 68 str+=" </tr> "; 69 str+=" <tr><td style='height: 50px;'></td></tr>"; 70 str+=" </table>"; 71 str+="</td>"; 72 str+="</tr>"; 73 str+="</table>"; 74 $this.html(str); 75 //need juqery ui plugin 76 $this.find("button").button(); 77 //"+$this.attr("id")+" 78 $this.find("#"+$this.attr("id")+"btnSelectAll").click(function(){ 79 $this.find("option[name='"+$this.attr("id")+"opSelect']").each(function(i){ 80 $("<option name='"+$this.attr("id")+"opReSelect' id='"+this.id+"' value='"+this.value+"'>"+$(this).text()+"</option>").appendTo("#"+$this.attr("id")+"seReSelect"); 81 }); 82 $("#"+$this.attr("id")+"seSelect").empty(); 83 opts.onChange($("option[name='"+$this.attr("id")+"opReSelect']")); 84 }); 85 86 $("#"+$this.attr("id")+"btnReSelectAll").click( 87 function(){ 88 $("option[name='"+$this.attr("id")+"opReSelect']").each(function(i){ 89 90 $("<option name='"+$this.attr("id")+"opSelect' id='"+this.id+"' value='"+this.value+"'>"+$(this).text()+"</option>").appendTo("#"+$this.attr("id")+"seSelect"); 91 }); 92 $("#"+$this.attr("id")+"seReSelect").empty(); 93 opts.onChange($("option[name='"+$this.attr("id")+"opReSelect']")); 94 } 95 ); 96 97 $("#"+$this.attr("id")+"btnSelectOne").click( 98 function(){ 99 if($("#"+$this.attr("id")+"seSelect").val()){ 100 var arrChecked= $("#"+$this.attr("id")+"seSelect option:checked") 101 for(var i=0;i<arrChecked.length;i++){ 102 $("<option name='"+$this.attr("id")+"opReSelect' id='"+arrChecked[i].id+"' value='"+arrChecked[i].value+"'>"+$(arrChecked[i]).text()+"</option>").appendTo("#"+$this.attr("id")+"seReSelect"); 103 $("option[name='"+$this.attr("id")+"opSelect']").each(function(j){ 104 if(this.value==arrChecked[i].value){ 105 $(this).remove(); 106 } 107 }); 108 } 109 opts.onChange($("option[name='"+$this.attr("id")+"opReSelect']")); 110 } 111 else 112 { 113 $.dashboard.alert("Tip","Please select a report!") 114 } 115 } 116 ); 117 118 $("#"+$this.attr("id")+"btnReSelectOne").click( 119 function(){ 120 if($("#"+$this.attr("id")+"seReSelect").val()){ 121 var arrChecked= $("#"+$this.attr("id")+"seReSelect option:checked"); 122 for(var i=0;i<arrChecked.length;i++){ 123 $("<option name='"+$this.attr("id")+"opSelect' id='"+arrChecked[i].id+"' value='"+arrChecked[i].value+"'>"+$(arrChecked[i]).text()+"</option>").appendTo("#"+$this.attr("id")+"seSelect"); 124 $("option[name='"+$this.attr("id")+"opReSelect']").each(function(j){ 125 if(this.value==arrChecked[i].value){ 126 $(this).remove(); 127 } 128 }); 129 } 130 opts.onChange($("option[name='"+$this.attr("id")+"opReSelect']")); 131 } 132 else 133 { 134 $.dashboard.alert("Tip","Please select a report!") 135 } 136 } 137 ); 138 139 $("#"+$this.attr("id")+"btnUp").click( 140 function(){ 141 if($("#"+$this.attr("id")+"seReSelect").val()&&$("#"+$this.attr("id")+"seReSelect option:checked").length==1){ 142 var index=$("#"+$this.attr("id")+"seReSelect")[0].selectedIndex; 143 $($("option[name='"+$this.attr("id")+"opReSelect']")[index]).after($("option[name='"+$this.attr("id")+"opReSelect']")[index-1]); 144 opts.onChange($("option[name='"+$this.attr("id")+"opReSelect']")); 145 } 146 else 147 { 148 $.dashboard.alert("Tip","Please select a report!") 149 } 150 } 151 ); 152 $("#"+$this.attr("id")+"btnDown").click( 153 function(){ 154 if($("#"+$this.attr("id")+"seReSelect").val()&&$("#"+$this.attr("id")+"seReSelect option:checked").length==1){ 155 var index=$("#"+$this.attr("id")+"seReSelect")[0].selectedIndex; 156 $($("option[name='"+$this.attr("id")+"opReSelect']")[index]).before($("option[name='"+$this.attr("id")+"opReSelect']")[index+1]); 157 opts.onChange($("option[name='"+$this.attr("id")+"opReSelect']")); 158 } 159 else 160 { 161 $.dashboard.alert("Tip","Please select a report!") 162 } 163 } 164 ); 165 }); 166 }; 167 })(jQuery);
使用方法:
1 var opSelect1=[{id:'1',name:'tip1'},{id:'2',name:'tip2'}]; 2 var opReSelect1=[{id:'3',name:'tip3'},{id:'3',name:'tip3'}]; 3 $("#selectToSelect1").selectToSelect({ 4 size:10, 5 opSelect:opSelect1, 6 opReSelect:opReSelect1, 7 onChange:function(options){ 8 var ids= $("#selectToSelect1").selectToSelect("getSelectedIds"); 9 } 10 });