在网上看到很多权限分配的代码,大都用js做的,并且觉得很复杂,用jquery完全可以实现一样的功能,并且代码很简洁。
js部分:
<script type="text/javascript">
//全部右添加 function cutAllRight(callback){ $("#select1 option").appendTo("#select2"); callback(); } //全部左添加 function cutAllLeft(callback){ $("#select2 option").appendTo("#select1"); callback(); } //右添加 function cutRight(callback){ $("#select1 option:selected").appendTo("#select2"); callback(); } //左添加 function cutLeft(callback){ $("#select2 option:selected").appendTo("#select1"); callback(); } //上移动 function upEvent(){ var option = document.getElementById("select2").getElementsByTagName("option"); for(var i=0;i<option.length;i++){ if(option[i].selected&&i!=0){ option[i-1].selected=true; option[i].selected=false; break; } } } //下移动 function downEvent(){ var option = document.getElementById("select2").getElementsByTagName("option"); for(var i=0;i<option.length;i++){ if(option[i].selected&&i!=(option.length-1)){ option[i+1].selected=true; option[i].selected=false; break; } } } //双击添加 function doubleClick1(n,callback){ if(n==1){ $("#select1 option:selected").appendTo("#select2"); callback(); } else if(n==2){ $("#select2 option:selected").appendTo("#select1"); callback(); } } </script> <script type="text/javascript"> </script> <script type="text/javascript"> function addDiv(){ $("#span1").html($("#select2 option").length); } function AllRight(){ cutAllRight(addDiv); } function Right(){ cutRight(addDiv); } function Left(){ cutLeft(addDiv); } function AllLeft(){ cutAllLeft(addDiv); } function doubleClick(n){ doubleClick1(n,addDiv); } function selectOut(obj){ obj.οncοntextmenu=function(){ var option = document.getElementsByTagName("option"); for(var i=0;i<option.length;i++){ option[i].selected=false; } } } </script>jsp页面
<div style="width:80%;text-align: center;padding-top: 30px">
<div>已选择<span id="span1">0</span>人</div> <div class="div2" style="width:202px;border-style: solid;border-width: 1px"> <select multiple="multiple" style="width:200px;height:278px" id="select1" οndblclick="doubleClick(1)" οnmοuseοver="selectOut(this)"> <option value="赵培沛">赵培沛</option> <option value="陈帅">陈帅</option> <option value="梁国栋">梁国栋</option> <option value="程洪涛">程洪涛</option> <option value="马祥然">马祥然</option> <option value="李森">李森</option> <option value="侯俊杰">侯俊杰</option> </select> </div> <div class="div3"> <div><img src="p_w_picpath/ico/bullet_arrow_top1.png" οnclick="AllRight()"/></div> <div><img src="p_w_picpath/ico/bullet_arrow_down1.png" οnclick="Right()"/></div> <div><img src="p_w_picpath/ico/bullet_arrow_up1.png" οnclick="Left()"/></div> <div><img src="p_w_picpath/ico/bullet_arrow_bottom1.png" οnclick="AllLeft()"/></div> </div> <div class="div2" style="width:202px"> <select multiple="multiple" style="width:200px;height:278px" id="select2" οndblclick="doubleClick(2)" οnmοuseοver="selectOut(this)"> </select> </div> <div class="div3"> <div> </div> <div> </div> <div><img src="p_w_picpath/ico/bullet_arrow_up.png" οnclick="upEvent()"/></div> <div><img src="p_w_picpath/ico/bullet_arrow_down.png" οnclick="downEvent()"/></div> </div> </div>其中自己加上向左,全左,向右,全右,向上,向下的6张图片即可。加上jquery的库文件
进×××流: 178483774