基于jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)添加刪除代碼分享

更新時(shí)間：2015年08月25日 09:11:25 投稿：lijiao

這篇文章主要介紹了基于jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)添加刪除功能，推薦給大家，有需要的小伙伴可以參考下。

本文實(shí)例講述了select選擇框內(nèi)容左右移動(dòng)添加刪除。分享給大家供大家參考。具體如下：
select選擇框內(nèi)容左右移動(dòng)添加刪除代碼基于jquery-1.8.3.min.js實(shí)現(xiàn)，簡(jiǎn)單實(shí)用，選中選項(xiàng)內(nèi)容，點(diǎn)擊移動(dòng)按鈕可進(jìn)行內(nèi)容左右移動(dòng)，雙擊option內(nèi)容也可左右移動(dòng)，支持單選移動(dòng)、多選移動(dòng)和一鍵全部移動(dòng)！

運(yùn)行效果圖： ----------------------查看效果-----------------------

小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
為大家分享的代碼如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select選擇框內(nèi)容左右移動(dòng)添加刪除代碼</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;outline:none;}
a,img{border:0;}
body{font:12px/normal "microsoft yahei";}
.selectbox{width:500px;height:220px;margin:100px auto;}
.selectbox div{float:left;}
.selectbox .select-bar{padding:0 20px;}
.selectbox .select-bar select{width:150px;height:200px;border:1px #A0A0A4 solid;padding:4px;font-size:14px;font-family:"microsoft yahei";}
.btn-bar{}
.btn-bar p{margin-top:16px;}
.btn-bar p .btn{width:50px;height:30px;cursor:pointer;font-family:simsun;font-size:14px;}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){ 
 //移到右邊
 $('#add').click(function(){
 //先判斷是否有選中
 if(!$("#select1 option").is(":selected")){  
  alert("請(qǐng)選擇需要移動(dòng)的選項(xiàng)")
 }
 //獲取選中的選項(xiàng)，刪除并追加給對(duì)方
 else{
  $('#select1 option:selected').appendTo('#select2');
 } 
 });
 
 //移到左邊
 $('#remove').click(function(){
 //先判斷是否有選中
 if(!$("#select2 option").is(":selected")){  
  alert("請(qǐng)選擇需要移動(dòng)的選項(xiàng)")
 }
 else{
  $('#select2 option:selected').appendTo('#select1');
 }
 });
 
 //全部移到右邊
 $('#add_all').click(function(){
 //獲取全部的選項(xiàng),刪除并追加給對(duì)方
 $('#select1 option').appendTo('#select2');
 });
 
 //全部移到左邊
 $('#remove_all').click(function(){
 $('#select2 option').appendTo('#select1');
 });
 
 //雙擊選項(xiàng)
 $('#select1').dblclick(function(){ //綁定雙擊事件
 //獲取全部的選項(xiàng),刪除并追加給對(duì)方
 $("option:selected",this).appendTo('#select2'); //追加給對(duì)方
 });
 
 //雙擊選項(xiàng)
 $('#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="超級(jí)管理員">超級(jí)管理員</option>
    <option value="普通管理員">普通管理員</option>
    <option value="信息發(fā)布員">信息發(fā)布員</option>
    <option value="財(cái)務(wù)管理員">財(cái)務(wù)管理員</option>
    <option value="產(chǎn)品管理員">產(chǎn)品管理員</option>
    <option value="資源管理員">資源管理員</option>
    <option value="系統(tǒng)管理員">系統(tǒng)管理員</option>
    <option value="超級(jí)管理員">超級(jí)管理員</option>
    <option value="普通管理員">普通管理員</option>
    <option value="信息發(fā)布員">信息發(fā)布員</option>
    <option value="財(cái)務(wù)管理員">財(cái)務(wù)管理員</option>
    <option value="產(chǎn)品管理員">產(chǎn)品管理員</option>
    <option value="資源管理員">資源管理員</option>
    <option value="A5源碼">A5源碼</option>
  </select>
</div>

<div class="btn-bar">
  <p><span id="add"><input type="button" class="btn" value=">" title="移動(dòng)選擇項(xiàng)到右側(cè)"/></span></p>
  <p><span id="add_all"><input type="button" class="btn" value=">>" title="全部移到右側(cè)"/></span></p>
  <p><span id="remove"><input type="button" class="btn" value="<" title="移動(dòng)選擇項(xiàng)到左側(cè)"/></span></p>
  <p><span id="remove_all"><input type="button" class="btn" value="<<" title="全部移到左側(cè)"/></span></p>
</div>

<div class="select-bar">
  <select multiple="multiple" id="select2"></select>
</div> 
</div>
<div style="text-align:center;">
</div>
</body>
</html>

以上就是為大家分享的select選擇框內(nèi)容左右移動(dòng)添加刪除代碼，希望大家可以喜歡。

您可能感興趣的文章: