JS實現列表資料左右、上下移動功能
阿新 • • 發佈：2018-12-30
本文主要介紹JS實現將左邊下拉框列表選中項資料新增到右邊的功能，支援多選移動。文章中提供了兩種方案，一種是將左側選中項複製到右邊，左側資料不發生變化，同時阻止資料重複新增到右側；另一種是資料新增到右邊的同時從左邊移除，從右邊移除的同時向左邊追加，並對右側列表資料實現了上下移動功能。
一、效果圖
進行左右移動時，選定一項或多項點選新增或移除(按住shift或ctrl可以多選)，上下移動不支援多選。
1.左側資料新增到右邊，重複新增資料時會進行提示並阻止
2.左側資料移動到右邊，移動後從左側列表刪除，選中右側列表中資料點選上移/下移進行移動
二、Html程式碼：
<!DOCTYPE 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;
}
}
}