jquery 實現 點擊把數據移動右側 點擊再次移回到左側

2018年第一發  希望新的一年和大家一下學習更多知識  

 JS：//把數據左邊挪到了右邊，再從右邊移動回來
function moveOption(e1, e2){
   $("#"+e1+" option").each(function(){
        if($(this).is(':selected')){
            var oValue = $(this).val().toString();
            var oText = $(this).text().toString();
            var option = $("<option>").val(oValue).text(oText);
            $(this).remove();
            $("#"+e2).append(option);
        }
    });
}

HTML代碼：

<div class="user-select">
 <div style="width: 40%;"><span class="title">我是用戶名稱</span> <span class="query pull-right"><input type="text"></span></div>
 <div style="width: 15%;"></div>
 <div style="width: 40%;"><span class="title">我是用戶名稱</span> <span class="query pull-right"><input type="text"></span></div>
</div>
<div>
 <div class="group-box" style="width: 40%;">
 <select multiple="multiple" id="leftId" ondblclick="moveOption('leftId','rightId')" class="mutipleSelect">
 <option>哈哈哈哈哈哈5哈</option>
 <option>哈哈哈哈哈哈3哈</option>
 </select>
 </div>
 <div class="group-box" style="text-align:center;width: 15%;">
 <i class="glyphicon glyphicon-backward" type="button" onclick="moveOption('rightId','leftId')"></i>
 <i class="glyphicon glyphicon-forward" type="button"
 onclick="moveOption('leftId','rightId')"></i>
 </div>
 <div class="group-box" style="width: 40%;">
 <select multiple="multiple" id="rightId" ondblclick="moveOption('rightId','leftId')" class="mutipleSelect">
 </select> 
 </div>
</div>

CSS樣式：

 

<style type="text/css">
 .group-box{padding:0;overflow:auto;display:inline-block}.group-box>select{border:1px solid #ddd;width:100%;height:500px;cursor:pointer;overflow:hidden;text-overflow:elipsis;white-space:nowrap}.group-box>select>option{height:30px;line-height:30px}.group-box>i{margin-top:200px}.user-select{width:100%;height:45px;line-height:45px;display:black;background:#ddd}.user-select>div{padding:0;margin:0;display:inline-block}.user-select .title{padding-left:10px;display:inline-block;font-weight:600;color:#fff}.user-select .query{padding-right:30px;display:inline-block;width:100px}.user-select .query>input{width:100px;line-height:25px}
</style>