JS实现列表数据左右、上下移动功能
程序员文章站
2022-03-08 10:19:38
...
本文主要介绍JS实现将左边下拉框列表选中项数据添加到右边的功能，支持多选移动。文章中提供了两种方案，一种是将左侧选中项复制到右边，左侧数据不发生变化，同时阻止数据重复添加到右侧；另一种是数据添加到右边的同时从左边移除，从右边移除的同时向左边追加，并对右侧列表数据实现了上下移动功能。
一、效果图
进行左右移动时，选定一项或多项点击添加或移除(按住shift或ctrl可以多选)，上下移动不支持多选。
1.左侧数据添加到右边，重复添加数据时会进行提示并阻止
2.左侧数据移动到右边，移动后从左侧列表删除，选中右侧列表中数据点击上移/下移进行移动
二、Html代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>moveOption</title>
<style>
.sel-box {
width: 100%;
border: 1px solid #cccccc;
height: 180px;
padding: 10px;
}
</style>
</head>
<body>
<p>选定一项或多项点击添加或移除(按住shift或ctrl可以多选)</p>
<form method="post" name="myform">
<p>左侧数据复制到右边，右侧数据不能重复</p>
<table border="0" width="300">
<tr>
<td width="40%">
<select id="languageCopy" class="sel-box " multiple></select>
</td>
<td width="20%" align="center">
<button type="button" title="添加" onclick="copyOption(this, 'add')">添加</button>
<br />
<br />
<button type="button" title="删除" onclick="copyOption(this, 'remove')">删除</button>
</td>
<td width="40%">
<select id="copyResult" class="sel-box" multiple></select>
</td>
</tr>
</table>
<p>左侧数据移动到右边，数据移动后从左侧列表删除</p>
<table border="0" width="400">
<tr>
<td width="30%">
<select id="languageRemove" class="sel-box " multiple></select>
</td>
<td width="20%" align="center">
<button type="button" title="添加" onclick="moveOption(this.parentNode.previousElementSibling.childNodes[1], this.parentNode.nextElementSibling.childNodes[1])">添加</button>
<br />
<br />
<button type="button" title="删除" onclick="moveOption(this.parentNode.nextElementSibling.childNodes[1], this.parentNode.previousElementSibling.childNodes[1])">删除</button>
</td>
<td width="30%">
<select id="groupMember" class="sel-box" multiple></select>
</td>
<td width="20%" align="center">
<button type="button" onclick="changepos(this,-1)">上移</button>
<br />
<br />
<button type="button" onclick="changepos(this,1)">下移</button>
</td>
</tr>
</table>
</form>
<script src="../../plugins/jquery-2.0.3.min.js"></script>
</body>
</html> 三、Js代码：
//下拉框初始数据
var data = [{ "id": 1, "text": "Java" }, { "id": 2, "text": "JavaScript" }, { "id": 3, "text": "C#" }, { "id": 4, "text": "PHP" }, { "id": 5, "text": "C++" }, { "id": 6, "text": "Python" }, { "id": 7, "text": "GO" }, { "id": 8, "text": "SQL" }, { "id": 9, "text": "C" }];
//右侧栏数据集合，用于判重
var selectMember = [];
//初始化页面
$(document).ready(function () {
//初始化数据
initData(data);
})
/**
* 初始化数据，给左侧下拉框绑定下拉选项
*/
function initData(data) {
var $languageCopy = document.querySelector('#languageCopy');
data.forEach(function (item, index) {
var objOption = document.createElement("option");
objOption.text = item.text;
objOption.value = item.id;
objOption.disabled = !!item.IsDisable;
$languageCopy.appendChild(objOption);
});
var $languageRemove = document.querySelector('#languageRemove');
data.forEach(function (item, index) {
var objOption = document.createElement("option");
objOption.text = item.text;
objOption.value = item.id;
objOption.disabled = !!item.IsDisable;
$languageRemove.appendChild(objOption);
});
}
/**
* 选中项添加到右边，左侧栏数据不删除，并且不能添加重复数据到右边
*/
function copyOption(obj, type) {
var eleA = "";
var eleB = "";
if (type == "add") {//从左侧向右侧添加数据
eleA = obj.parentNode.previousElementSibling.firstElementChild;
eleB = obj.parentNode.nextElementSibling.firstElementChild;
} else {//删除右侧数据
eleA = obj.parentNode.nextElementSibling.firstElementChild;
eleB = obj.parentNode.previousElementSibling.firstElementChild;
}
for (var i = 0; i < eleA.options.length; i++) {
if (eleA.options[i].selected) {
var eSelected = eleA.options[i];
if (type == "add") {
if (selectMember.indexOf(eSelected.text) < 0) {//判断左边选中项在右侧群成员列表中是否存在
eleB.options.add(new Option(eSelected.text, eSelected.value));//将选中项添加到右边
selectMember.push(eSelected.text); //将选中值追加到selectMember[]中
} else {
alert("该项在右侧列表已经存在");
}
} else {
eleA.remove(i);//移除选中项
i = i - 1;//每移除一项，下拉选项的索引值会减1
selectMember.splice($.inArray(eSelected.text, selectMember), 1); //将选中值从selectMember[]中移除
}
}
}
}
/**
* 选中项左右移动
*/
function moveOption(eleA, eleB) {
for (var i = 0; i < eleA.options.length; i++) {
if (eleA.options[i].selected) {
var eSelected = eleA.options[i];
eleB.options.add(new Option(eSelected.text, eSelected.value));//将选中项添加到右边
eleA.remove(i);//移除选中项
i = i - 1;//每移除一项，下拉选项的索引值会减1
}
}
}
/**
* 选中项上下移动
*/
function changepos(obj, index) {
var element = obj.parentNode.previousElementSibling.childNodes[1];
//选中项索引值
var selectedIndex = element.options.selectedIndex;
var selText = element.options[selectedIndex].text;
var selValue = element.options[selectedIndex].value;
//上移，上移时将选中项数据与上一条option数据进行交换
if (index == -1) {
if (selectedIndex > 0) {
element.options[selectedIndex].text = element.options[selectedIndex - 1].text;
element.options[selectedIndex].value = element.options[selectedIndex - 1].value;
element.options[selectedIndex].selected = false;
element.options[selectedIndex - 1].text = selText;
element.options[selectedIndex - 1].value = selValue;
element.options[selectedIndex - 1].selected = true;
}
}
//下移，下移时将选中项数据与下一条option数据进行交换
else if (index == 1) {
if (selectedIndex < element.options.length - 1) {
element.options[selectedIndex].text = element.options[selectedIndex + 1].text;
element.options[selectedIndex].value = element.options[selectedIndex + 1].value;
element.options[selectedIndex].selected = false;
element.options[selectedIndex + 1].text = selText;
element.options[selectedIndex + 1].value = selValue;
element.options[selectedIndex + 1].selected = true;
}
}
}上一篇： Error listenerStart 个人问题（已解决）
下一篇： 详细介绍mysql中的分区