最終實現效果

dom程式碼

<div id="peoples" style="padding:40px;">
<div id="leftContent" style="float:left;width:380px;border:1px solid #c9c9c9">
</br><h1 style="text-align:center">可選人員</h1></br>
<span style="margin-left:10%"><input type="text" id="canChooseInput" />&nbsp;&nbsp;&nbsp;<button onclick="canSearch();">搜尋</button>
</br></br>
<div id="canChoose" style="maring:2px;border:2px slid black">
</div>
</div>
<div style="float:left;width:120px;"></br></br></br>
<span style="margin-left:25%"></span><button onclick="toRight();">新增&gt;&gt;</button></br></br>
<span style="margin-left:25%"><button onclick="toLeft();">刪除&lt;&lt;</button>
</div>
<div id="rightContent" style="float:left;width:380px;border:1px solid #c9c9c9">
</br><h1  style="text-align:center">已選人員</h1></br>
<span style="margin-left:10%"><input type="text" id="choosedInput" />&nbsp;&nbsp;&nbsp;<button onclick="choosedSearch();">搜尋</button>
</br></br>
<div  id="choosed" style="maring:2px;border:2px slid black;"></div>
</div>

</div>

js 控制如下

1 //向後臺傳送請求，查詢所有的風控對接人
var peoples = "${statics["com.busiinfo.creditManage.common.creditClientGetDataUtils"].getRiskManagementPeople()?default("")}";
var ps = peoples.split(",");
for(var n=0;n<ps.length;n++){
$("#canChoose").append("<button onclick='addCache(this);'  style='background:white;margin:6px;padding:3px 6px;border-radius:8px;cursor:pointer'>"+ps[n]+"</button>");

}

2

var cacheDataRight = "";//儲存最新的要新增到右側的資料
function addCache(obj){
var dd = $(obj).text();
//樣式控制
var zz = obj.style.background;
if(zz.indexOf("green") >= 0){
$(obj).css("background","white");
$(obj).css("color","black");
}else{
$(obj).css("background","green");
$(obj).css("color","white");
}
if(cacheDataRight.indexOf(dd) >=0){//過濾掉已經存在的資料
var arr ="";
var arrs = cacheDataRight.split(",");
for(var i=0;i<arrs.length;i++){
if(arrs[i] != dd){
arr += arrs[i]+",";
}
}
cacheDataRight = arr;
}else{
cacheDataRight += dd+",";
}
//alert(cacheDataRight)
}
function toRight(){
var arrs = cacheDataRight.split(",");
for(var j=0;j<arrs.length;j++){
var aa = arrs[j];
if(aa != "" && aa != null){//空值不新增
var rightContent = $("#rightContent").text();
if(rightContent.indexOf(aa) <0){//右側不存在的新增
$("#choosed").append("<button onclick='addCacheLeft(this);'  style='background:white;margin:5px;padding:3px 6px;border-radius:8px;cursor:pointer'>"+aa+"</button>");
//刪除左側該值
var bb = $("#leftContent button");
for(var k=0;k<bb.length;k++){
if($(bb[k]).text() == aa){
//刪除該資料
$(bb[k]).remove();
}
}
//將cacheDataRight快取中的資料刪除
if(cacheDataRight.indexOf(aa) >=0){
var arr ="";
var arrs = cacheDataRight.split(",");
for(var i=0;i<arrs.length;i++){
if(arrs[i] != aa && arrs[i] != "" && arrs[i] != null){
arr += arrs[i]+",";
}
}
cacheDataRight = arr;
}
}
}
}
}
var cacheDataLeft = "";//儲存最新的要新增到左側的資料(從右側內容區取)
function addCacheLeft(obj){
var dd = $(obj).text();
//樣式控制
var zz = obj.style.background;
if(zz.indexOf("green") >= 0){
$(obj).css("background","white");
$(obj).css("color","black");
}else{
$(obj).css("background","green");
$(obj).css("color","white");
}

if(cacheDataLeft.indexOf(dd) >=0){//過濾掉已經存在的資料
var arr ="";
var arrs = cacheDataLeft.split(",");
for(var i=0;i<arrs.length;i++){
if(arrs[i] != dd){
arr += arrs[i]+",";
}
}
cacheDataLeft = arr;
}else{
cacheDataLeft += dd+",";
}
//alert(cacheDataLeft)
}
function toLeft(){
var arrs = cacheDataLeft.split(",");
for(var j=0;j<arrs.length;j++){
var aa = arrs[j];
if(aa != "" && aa != null){//空值不新增
var leftContent = $("#leftContent").text();
if(leftContent.indexOf(aa) <0){//左側不存在的新增
$("#canChoose").append("<button onclick='addCache(this);'  style='background:white;margin:5px;padding:3px 6px;border-radius:8px;cursor:pointer'>"+aa+"</button>");
//刪除右側該值
var bb = $("#rightContent button");
for(var k=0;k<bb.length;k++){
if($(bb[k]).text() == aa){
//刪除該資料
$(bb[k]).remove();
}
}
//將cacheDataLeft快取中的資料刪除
if(cacheDataLeft.indexOf(aa) >=0){
var arr ="";
var arrs = cacheDataLeft.split(",");
for(var i=0;i<arrs.length;i++){
if(arrs[i] != aa && arrs[i] != "" && arrs[i] != null){
arr += arrs[i]+",";
}
}
cacheDataLeft = arr;
}
}
}
}
}
//左側搜尋
function canSearch(){
var canValue = $("#canChooseInput").val();
var bb = $("#canChoose button");
//alert(canValue+"||"+$(bb[1]).text())
for(var s=0;s<bb.length;s++){
if($(bb[s]).text() == canValue){
addCache(bb[s]);
}
}
}
//右側搜尋
function choosedSearch(){
var choosedValue = $("#choosedInput").val();
var bb = $("#choosed button");
//alert(choosedValue+"||"+$(bb[1]).text())
for(var s=0;s<bb.length;s++){
if($(bb[s]).text() == choosedValue){
addCacheLeft(bb[s]);
}
}
}