设计大概是这个样子的，很简单，两个div，两个互移按钮，一个搜索框，要求搜索框输入时，触发待选框的搜索项
<input class="form-control" placeholder="请搜索待选科目" type="text" id="txtSearch" name="txtSearch" onkeyup="match()" style="width: 200px;">
<input type=‘checkBox‘ name=‘check‘ id="AllCheck" style="margin:10px 0 0 0"/>
<label class="col-xs-4 control-label"><span style="color:red"> </span>待选</label>
<div class="col-xs-6" id="waitingSelect" style="overflow-y:auto;height:200px">
</div>
<a href="#" id="Yd" style="color:red;margin-top:50px;width:50px;height:50px;margin-left:-60px;">
<img src="~/images/buttonClick.png" />
</a>
<div style="margin-top:50px">
<a href="#" id="MoveRest" style="color:red;margin-top:800px;width:50px;height:50px;margin-left:-60px;">
<img src="~/images/moveRest.png" />
</a>
</div>
<label class="col-xs-4 control-label"><span style="color:red"> </span>已选</label>
<div id="selected" class="col-xs-6" style="overflow-y:auto;height:200px">
</div>
如图所示，
下面是js实现
首先，自定义方法
/*
从Json数组按某个字段中模糊匹配记录
IN
array 数据列表
columnName 字段名称 仅限字符串类型
text 关键字
OUT
查找到的数据列表
*/
var MatchRecordsFromJsonArray = function (array, columnName, text) {
var result = [];
if ($.isArray(array)) {
for (var i = 0; i < array.length; i++) {
var rowItem = array[i];
for (var item in rowItem) {
if (item == columnName && rowItem[item].indexOf(text)>=0) {
result.push(rowItem);
}
}
}
}
return result;
}
/**
* 将sourcw中数据添加到tagetArr中
* @param {any} targetArr
* @param {any} source
* @key {any} key 主键
*/
var AddRange = function (targetArr, source,key) {
if ($.isArray(targetArr) && $.isArray(source)) {
for (var item in source) {
if (SearchRecordsFromJsonArray(targetArr, key, source[item][key]).length <= 0) {
targetArr.push(source[item]);
}
}
}
return targetArr;
}
/**
* 从targetArr中移除source中的项
* @param {any} targetArr
* @param {any} source
* @key {any} key 主键
*/
var RemoveRange = function (targetArr, source, key) {
var resultArr = [];
if ($.isArray(targetArr) && $.isArray(source)) {
for (var item in targetArr) {
if (SearchRecordsFromJsonArray(source, key, targetArr[item][key]).length <= 0) {
resultArr.push(targetArr[item]);
}
}
}
targetArr = resultArr;
return targetArr;
}
/**
* 左右选择列表元数据
* */
var selectedArea = {
LeftList: [],
RightList:[]
};
/**
* 根据元数据重新加载选择列表
* @param {any} obj
*/
function ReloadSelectArea(obj) {
$("#waitingSelect").html(‘‘);
$("#selected").html(‘‘);
var leftDisplayItems = MatchRecordsFromJsonArray(selectedArea.LeftList, "expenseName", $("#txtSearch").val());
LoadSelectAreaItems("#selected", obj["RightList"], "expenseListId", "expenseName");
LoadSelectAreaItems("#waitingSelect", leftDisplayItems, "expenseListId", "expenseName");
}
/**
* 、加载单侧选择列表
* @param {any} selector
* @param {any} arr
* @param {any} valueFeild
* @param {any} TextFeild
*/
function LoadSelectAreaItems(selector, arr, valueFeild, TextFeild) {
var container = $(selector);
container.html(‘‘);
for (var i in arr) {
container.append("<li style=‘list-style-type:none‘><input type=‘checkBox‘ style=‘‘ value=" + arr[i][valueFeild] + ">" + arr[i][TextFeild] + "</li>");
}
}
//搜索框触发事件
function match() {
var matchResult = MatchRecordsFromJsonArray(selectedArea.LeftList, "expenseName", $("#txtSearch").val());
matchResult = RemoveRange(matchResult, selectedArea.RightList, "expenseListId");
LoadSelectAreaItems("#waitingSelect", matchResult, "expenseListId", "expenseName");
}
/**
* 从左往右移
* @param {any} leftId
*/
function MoveToRight(leftId) {
var selectedArray = [];
var leftSelector = "#" + leftId + " input[type=‘checkbox‘]";
var leftItems = document.querySelectorAll(leftSelector);
for (var i = 0; i < leftItems.length; i++) {
if (leftItems[i].checked) {
selectedArray.push({
expenseListId: leftItems[i].value,
expenseName: leftItems[i].nextSibling.nodeValue
});
}
}
selectedArea.LeftList=RemoveRange(selectedArea.LeftList, selectedArray, "expenseListId");
selectedArea.RightList=AddRange(selectedArea.RightList, selectedArray, "expenseListId");
ReloadSelectArea(selectedArea);
document.getElementById("AllCheck").checked = false;
}
/**
* 从右往左移
* @param {any} rightId
*/
function MoveToLeft(rightId) {
var selectedArray = [];
var rightSelector = "#" + rightId + " input[type=‘checkbox‘]";
var rigthItems = document.querySelectorAll(rightSelector);
for (var i = 0; i < rigthItems.length; i++) {
if (rigthItems[i].checked) {
selectedArray.push({
expenseListId: rigthItems[i].value,
expenseName: rigthItems[i].nextSibling.nodeValue
});
}
}
selectedArea.LeftList = AddRange(selectedArea.LeftList, selectedArray, "expenseListId");
selectedArea.RightList = RemoveRange(selectedArea.RightList, selectedArray, "expenseListId");
ReloadSelectArea(selectedArea);
document.getElementById("AllCheck").checked = false;
}
//注册左右互移事件
$(function () {
$(‘#Yd‘).on(‘click‘, function () {
MoveToRight("waitingSelect");
});
$(‘#MoveRest‘).on(‘click‘, function () {
MoveToLeft("selected");
});
});
//全选按钮
$("#AllCheck").click(function () {
var waitingSelect = document.getElementById("waitingSelect");
if ($(this).is(":checked")) {
for (var i = 0; i < waitingSelect.childNodes.length; i++) {
waitingSelect.childNodes[i].childNodes[0].checked = true;
}
}
else {
for (var i = 0; i < waitingSelect.childNodes.length; i++) {
waitingSelect.childNodes[i].childNodes[0].checked = false;
}
}
})
js两个数组去重后，绑定控件，并支持模糊搜索数组项以及数组互移
原文：https://www.cnblogs.com/jiuyueBlog/p/11984427.html