layui穿梭框数据动态加载

<style>
    .layui-transfer-header{
        padding-top: 11px;
    }
</style>
<div class="layui-card">
	<div class="layui-card-header">
		<div class="display-flex align-items-center justify-space-between">
			<div class="card-title">开通区域</div>
			<div class="card-tools">
				<div>
					<a href="{:url('index')}" class="layui-btn layui-btn-sm">返回列表</a>
				</div>
			</div>
		</div>
	</div>
	<div class="layui-card-body">
		<form class="form-horizontal layui-form" method="post" data-ajax="" lay-filter="formTest"
			enctype="multipart/form-data">
			<input type="hidden" name="id" value="{$id|default=''}">
			<input type="hidden" name="area_ids" value="{$area_ids|default=''}">
			<div class="layui-card-body">

				<div class="layui-form-item">
					<div class="layui-row">
						<div class="layui-col-xs12 layui-col-md2">
							<label class="layui-form-label">搜索</label>
						</div>
					  
					  <div class="layui-input-inline layui-input-wrap">
						<input type="text" name="area_search" lay-verify="" autocomplete="off" lay-reqtext="" lay-affix="clear" class="layui-input">
					  </div>
					  <div class="layui-form-mid" style="padding: 0!important;"> 
						<button type="button" class="layui-btn layui-btn-customer-info search-area" lay-on="get-vercode"> 确认</button>
					  </div>
					</div>
				  </div>

				  <div class="layui-form-item">
					<div class="layui-row">
						<div class="layui-col-xs12 layui-col-md2">
							<div class="layui-form-label">区域选择</div>
						</div>
						<div id="area-select1"></div>
					</div>
				</div>
				<div style="height: 40px;"></div>
<div class="layui-form-item">
					<div class="layui-row">
						<div class="layui-col-xs12 layui-col-md2">
							<div class="layui-form-label">区域选择</div>
						</div>
						<div id="area-select"></div>
					</div>
				</div>
				<div class="layui-form-item">
                    <div class="layui-col-xs12 layui-col-md10 layui-col-md-offset2 ">
                        <button type="submit" class="layui-btn layui-btn-customer-info"  lay-submit lay-filter="demo-val">保存</button>
                    </div>
                </div>
			</div>
		</form>
	</div>
</div>

<script language="javascript" type="text/javascript">
	//禁用Enter键表单自动提交  
		document.onkeydown = function(event) {  
			var target, code, tag;  
			if (!event) {  
				event = window.event; //针对ie浏览器  
				target = event.srcElement;  
				code = event.keyCode;  
				if (code == 13) {  
					tag = target.tagName;  
					if (tag == "TEXTAREA") { return true; }  
					else { return false; }  
				}  
			}  
			else {  
				target = event.target; //针对遵循w3c标准的浏览器，如Firefox  
				code = event.keyCode;  
				if (code == 13) {  
					tag = target.tagName;  
					if (tag == "INPUT") { $('.keywords').blur(); return false; }  
					else { return true; }   
				}  
			}  
		};  
		$(document).on("keypress", ":input:not(textarea)", function(event) {
			if (event.keyCode == 13) {
				event.preventDefault();
			}
		});
  </script>
<script>
	// var areas = {php}//echo $area; {/php};
	// console.log(areas);
	// console.log(typeof (areas));
	layui.use(function () {
		var transfer = layui.transfer;
		var util = layui.util;
		var layer = layui.layer;
		var form = layui.form;
		var $ = layui.$;
		var dataAll = [];
		var dataAllLeftChangable = [];
		{if isset($area) && $area} dataAll= {$area|raw}{/if};
		var dataAllSelected = [];
		var dataAllRightChangable = [];
		{if isset($selectAreas) && $selectAreas} dataAllSelected= {$selectAreas|raw}{/if};
		// console.log(dataAll);
		// console.log(dataAllSelected);
		if(dataAllSelected.length > 0){
			for(i in dataAllSelected){
				// console.log(i);
				// console.log(dataAll[i]);
				dataAllLeftChangable = dataAllLeftChangable.concat(dataAll[i]);
			}
			// console.log(dataAllLeftChangable);
		}
		console.log(dataAllLeftChangable);
		transfer.render({
							elem: '#area-select1',
							data: dataAll,
							value: dataAllSelected,
							width: 300,
							title: ['待选区域', '已选区域'],
							id: 'ids',
							// showSearch: true,
							onchange: function (obj, index) {
								// console.log(index);
								// console.log(obj);
								
								if(index == 1){
									for(j in obj){
										console.log(obj[j]);
										dataAllLeftChangable = dataAllLeftChangable.filter((val) => val.value !== obj[j].value);
										dataAllSelected = dataAllSelected.filter((val) => val !== obj[j].value);
									}
									// dataAllSelectedSec = dataAllSelectedSec.filter((val) => val.value !== obj.value)
									console.log('===================');
									console.log(dataAllLeftChangable);
									console.log(dataAllSelected);
									console.log('===================');
								}
								transfer.reload('ids', { // options
								});
							}
						});
		$(".search-area").click(function(){
			var area_search = $('input[name="area_search"]').val();
			// layer.alert(area_search);
			$.ajax({
				url: "{:url('getSearchedArea')}",
				type: "POST",
				data: {
					area_search: area_search
				},
				dataType: "json",
				success: function(data){
					console.log(data.data.length);
					// return;
					var data = data.data;
					dataAll = data;
					console.log(dataAllLeftChangable);
					dataAll = dataAll.concat(dataAllLeftChangable);
					console.log(dataAll);
					dataAll = removeTheSame(dataAll,'value');
					console.log('111',dataAll);
					if(data.length > 0){
						transfer.render({
							elem: '#area-select1',
							data: dataAll,
							value: dataAllSelected,
							width: 300,
							title: ['待选区域', '已选区域'],
							id: 'ids',
							// showSearch: true,
							onchange: function (obj, index) {
								// console.log(index);
								// console.log(obj);
								console.log(1111111111111111);
								if(index == 1){
									for(i in obj){
										dataAllSelected = dataAllSelected.filter((val) => val !== obj[i].value);
										dataAllLeftChangable = dataAllLeftChangable.filter((val) => val.value !== obj[i].value);
									}
									console.log('+++++++++++++++++++');
									console.log(dataAllLeftChangable);
									console.log(dataAllSelected);
									console.log(dataAll);
									console.log('++++++++++++++++++++');
									// dataAllSelectedSec = dataAllSelectedSec.concat(obj);
								}else{
									for(j in obj){
										if(dataAll[j].value == obj[j].value)
										dataAllSelected.push(dataAll[j].value);
										dataAllLeftChangable.push(dataAll[j]);
									}
								}
								
								console.log('---------------------------');
								console.log(dataAllLeftChangable);
								console.log(dataAllSelected);
								console.log(dataAll);
								console.log('------------------------');
								transfer.reload('ids', { // options
								});
							}
						});
					}else{
						console.log(data);
						// dataAll = [];
						transfer.render({
							elem: '#area-select1',
							data: dataAll,
							value: dataAllSelected,
							width: 300,
							title: ['待选区域', '已选区域'],
							id: 'ids',
							// showSearch: true,
							onchange: function (obj, index) {
								console.log(obj);
								console.log(index);
								dataAllSelectedSec = dataAllSelectedSec.concat(obj);
								transfer.reload('ids', { // options
								});
							}
						});
					}
					// layer.alert(data);
				},
				error: function(){
					layer.alert('failed');
				}
			})
			var getData = transfer.getData('ids');
			for (let i in getData) {
				console.log(i, getData[i].value)  //i是键名，obj[i]是键值
				dataAllSelected.push(getData[i].value);
			}

			console.log('000',getData);
			// dataAllSelected = dataAllSelected.concat(getData);
			console.log(getData);
			console.log(dataAllSelected);
			dataAllSelected = Array.from(new Set(dataAllSelected));
			console.log(dataAllSelected);
		})
})
</script>