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=" 40%;"><span class="title">我是用户名称</span> <span class="query pull-right"><input type="text"></span></div>
<div style=" 15%;"></div>
<div style=" 40%;"><span class="title">我是用户名称</span> <span class="query pull-right"><input type="text"></span></div>
</div>
<div>
<div class="group-box" style=" 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; 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=" 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;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{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;100px}.user-select .query>input{100px;line-height:25px}
</style>