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" οndblclick="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" οnclick="moveOption('rightId','leftId')"></i>
 <i class="glyphicon glyphicon-forward" type="button"
 οnclick="moveOption('leftId','rightId')"></i>
 </div>
 <div class="group-box" style="width: 40%;">
 <select multiple="multiple" id="rightId" οndblclick="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>

 

转载于:https://www.cnblogs.com/supershare/p/8359431.html