本文實例講述了select選擇框內(nèi)容左右移動添加刪除。分享給大家供大家參考。具體如下：
select選擇框內(nèi)容左右移動添加刪除代碼基于jquery-1.8.3.min.js實現(xiàn)，簡單實用，選中選項內(nèi)容，點擊移動按鈕可進行內(nèi)容左右移動，雙擊option內(nèi)容也可左右移動，支持單選移動、多選移動和一鍵全部移動！
運行效果圖： ----------------------查看效果-----------------------
小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的代碼如下
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>select選擇框內(nèi)容左右移動添加刪除代碼</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="移動選擇項到右側(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="移動選擇項到左側(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)容左右移動添加刪除代碼，希望大家可以喜歡。
新聞熱點
疑難解答
