jquery 实现点击把数据移动右侧点击再次移回到左侧

朴灿烈づ我的快乐病毒、 2023-06-11 13:22 25阅读 0赞

## **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样式：**

更多专业前端知识，请上 **【猿2048】www.mk2048.com**