jQuery實現的管理員許可權左右移動效果

antzone發表於2017-03-17
jQuery

在一些網站可能有這樣的功能，那就是左右移動管理員許可權，當然也可以是其他的形式，總之就是這麼一個功能，下面就通過程式碼例項介紹一下如何實現此功能，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
*{
  margin:0;
  padding:0;
  list-style-type:none;
}
a, img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}
.selectbox{
  width:500px;
  height:220px;
  margin:40px auto 0 auto;
}
.selectbox div{float:left;}
.selectbox .select-bar{padding:0 20px;}
.selectbox .select-bar select {
  width:150px;
  height:200px;
  border:4px #A0A0A4 outset;
  padding:4px;
}
.selectbox .btn{
  width:50px;
  height:30px;
  margin-top:10px;
  cursor:pointer;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(function(){ 
  $('#add').click(function(){ 
    $('#select1 option:selected').appendTo('#select2'); 
  });
  $('#remove').click(function(){ 
    $('#select2 option:selected').appendTo('#select1'); 
  });
  $('#add_all').click(function(){ 
    $('#select1 option').appendTo('#select2'); 
  });
  $('#remove_all').click(function(){ 
    $('#select2 option').appendTo('#select1'); 
  });
  $('#select1').dblclick(function(){
    $("option:selected",this).appendTo('#select2');
  });
  $('#select2').dblclick(function(){ 
    $("option:selected",this).appendTo('#select1'); 
  }); 
}); 
</script>
</head>
<body>
<div class="selectbox">
  <div class="select-bar">
    <select multiple="multiple" id="select1">
      <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="btn-bar"> 
    <span id="add"><input type="button" class="btn" value=">"/></span>
    <br />
    <span id="add_all"><input type="button" class="btn" value=">>"/></span>
    <br />
    <span id="remove"><input type="button" class="btn" value="<"/></span>
    <br />
    <span id="remove_all"><input type="button" class="btn" value="<<"/></span> 
  </div>
  <div class="select-bar">
    <select multiple="multiple" id="select2"></select>
  </div>
</div>
</body>
</html>

以上程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.實現原理:

效果簡單，自然原來也非常的簡單，所謂的許可權移動，其實就是移動將option項從一個select中移動到另一個select中，利用jquery中的相應的函式實現移動元素即可，具體看程式碼註釋。

二.程式碼註釋:

1.$(function(){})，當文字結構完全載入完畢再去執行函式中的程式碼。

2.$('#add').click(function(){$('#select1 option:selected').appendTo('#select2');})，點選響應元素可以將select1中的選中項移動到select2中，關於appendTo()函式可以參閱jQuery appendTo()一章節。

3.$('#add_all').click(function(){$('#select1 option').appendTo('#select2');})，此程式碼可以移動所有的option元素。

4.$('#select1').dblclick(function(){$("option:selected",this).appendTo('#select2');})，雙擊當前的select下拉選單中選中的元素移動到select2中去。

相關文章