欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS实现列表数据左右、上下移动功能

程序员文章站 2022-03-08 10:19:38
...

本文主要介绍JS实现将左边下拉框列表选中项数据添加到右边的功能,支持多选移动。文章中提供了两种方案,一种是将左侧选中项复制到右边,左侧数据不发生变化,同时阻止数据重复添加到右侧;另一种是数据添加到右边的同时从左边移除,从右边移除的同时向左边追加,并对右侧列表数据实现了上下移动功能。

一、效果图
进行左右移动时,选定一项或多项点击添加或移除(按住shift或ctrl可以多选),上下移动不支持多选。

1.左侧数据添加到右边,重复添加数据时会进行提示并阻止
JS实现列表数据左右、上下移动功能
2.左侧数据移动到右边,移动后从左侧列表删除,选中右侧列表中数据点击上移/下移进行移动
JS实现列表数据左右、上下移动功能
二、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;
        }
    }
}