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>

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的jquery 实现 点击把数据移动右侧 点击再次移回到左侧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。