您好,登录后才能下订单哦!
在网上看到很多权限分配的代码,大都用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.oncontextmenu=function(){
  var option = document.getElementsByTagName("option");
  for(var i=0;i<option.length;i++){
  option[i].selected=false;
  }
 }
 }
 </script>
jsp页面
<div >
  <div>已选择<span id="span1">0</span>人</div>
  <div class="div2" >
  <select multiple="multiple"  id="select1" ondblclick="doubleClick(1)" onmouseover="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" onclick="AllRight()"/></div>
  <div><img src="p_w_picpath/ico/bullet_arrow_down1.png" onclick="Right()"/></div>
  <div><img src="p_w_picpath/ico/bullet_arrow_up1.png" onclick="Left()"/></div>
  <div><img src="p_w_picpath/ico/bullet_arrow_bottom1.png" onclick="AllLeft()"/></div>
  </div>
  <div class="div2" >
  <select multiple="multiple"  id="select2" ondblclick="doubleClick(2)" onmouseover="selectOut(this)">
  </select>
  </div>
  <div class="div3">
  <div> </div>
  <div> </div>
  <div><img src="p_w_picpath/ico/bullet_arrow_up.png" onclick="upEvent()"/></div>
  <div><img src="p_w_picpath/ico/bullet_arrow_down.png" onclick="downEvent()"/></div>
  </div>
  </div> 
其中自己加上向左,全左,向右,全右,向上,向下的6张图片即可。加上jquery的库文件
进×××流: 178483774
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。