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

運行效果圖： ----------------------查看效果-----------------------

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select選擇框內容左右移動添加刪除代碼</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("請選擇需要移動的選項")
 }
 //獲取選中的選項，刪除并追加給對方
 else{
  $('#select1 option:selected').appendTo('#select2');
 } 
 });
 
 //移到左邊
 $('#remove').click(function(){
 //先判斷是否有選中
 if(!$("#select2 option").is(":selected")){  
  alert("請選擇需要移動的選項")
 }
 else{
  $('#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="信息發(fā)布員">信息發(fā)布員</option>
    <option value="財務管理員">財務管理員</option>
    <option value="產(chǎn)品管理員">產(chǎn)品管理員</option>
    <option value="資源管理員">資源管理員</option>
    <option value="系統(tǒng)管理員">系統(tǒng)管理員</option>
    <option value="超級管理員">超級管理員</option>
    <option value="普通管理員">普通管理員</option>
    <option value="信息發(fā)布員">信息發(fā)布員</option>
    <option value="財務管理員">財務管理員</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="移動選擇項到右側"/></span></p>
  <p><span id="add_all"><input type="button" class="btn" value=">>" title="全部移到右側"/></span></p>
  <p><span id="remove"><input type="button" class="btn" value="<" title="移動選擇項到左側"/></span></p>
  <p><span id="remove_all"><input type="button" class="btn" value="<<" title="全部移到左側"/></span></p>
</div>

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

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

您可能感興趣的文章: