【原创】可以在两个select之间相互跳转的选框，适合做权限管理用

这次给银行做的内控管理系统里有一块是权限管理，其中用到一个很好玩的东西，就是一个可以左右互动的权限选择的框，左边框里是已经有的权限，右边是没有的权限。然后权限可以在两个框之间来回的选择。最终完成提交修改。

 

选择框部分的代码

 <table width="90%" border="0" align="center" cellpadding="3" ><tr><td class="titlefont2"> </td><td width="400px">岗位已有权限</td><td width="60px">  </td><td width="400px">可分配权限</td></tr><tr><td width="10%" class="titlefont2">操作列表</td><td><html:select styleId="aaa" multiple="multiple" style="width:300px" property="righthave" size="10" ><html:options collection="rightList" labelProperty= "rightname" property="rightid" /></html:select ></td><td align="center"> <html:button value="增加" property="" onclick="addPost();"/><br /><br> <html:button value="移除" property="" onclick="delPost();"/></td><td><html:select styleId="bbb" style="width:300px" multiple="multiple" property="rightnohave" size="10" ><html:options collection="beyondRightList" labelProperty= "rightname" property="rightid" /></html:select></td></tr></table><tr> </tr><tr></tr><br><table width="90%" border="0" cellspacing="1" cellpadding="1" align="center" class="c1"><tr><td align="center" class="b1" height="25"> <html:button value="保存" property="" onclick="sub();"/>     <input type="button" name="return" onclick="javascript:history.back(-2);" value="返 回" ></td></tr></table>

几个用到的函数：

<mce:script type="text/javascript"><!--function addPost(){ var indexid = document.all.bbb.selectedIndex; if(-1==indexid) { alert("对不起，您没有选择权限！"); } else{ var workerid = document.all.bbb.value; var workername = document.all.bbb.options(indexid).text; var curop = new Option(workername,workerid); document.getElementById("aaa").options.add(curop); document.getElementById("bbb").options.remove(indexid); }}function delPost(){var indexid = document.all.aaa.selectedIndex;if(-1==indexid){alert("对不起，您没有选择权限！");}else{var workerid = document.all.aaa.value;var workername = document.all.aaa.options(indexid).text;var curop = new Option(workername,workerid);document.getElementById("bbb").options.add(curop);document.getElementById("aaa").options.remove(indexid);}}function sub(){ var temp=""; var len = document.getElementById("aaa").length; for(i=0;i<len;i++) { temp = temp+document.getElementById("aaa").options[i].value; if(i < len -1 ) temp = temp + "#"; } document.getElementById("righthaves").value=temp; var b = window.confirm("您确定修改该岗位的权限！"); if(b) document.getElementById("F2").submit(); else return false;}// --></mce:script>

在form里放一个隐藏域id=righthaves,sub()函数最后把完成更新的权限列表赋值给righthaves，然后在服务器端取得这个值就可以了！如何取，就不说了，简单正则表达式！