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

￡神魔★判官ぃ 2022-05-27 07:08 461阅读 0赞

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

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

1.左侧数据添加到右边，重复添加数据时会进行提示并阻止  
![这里写图片描述][70]  
2.左侧数据移动到右边，移动后从左侧列表删除，选中右侧列表中数据点击上移/下移进行移动  
![这里写图片描述][70 1]  
**二、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;
            }
        }
    }

[70]: /images/20220527/5c6b8c8729bd48fbb0b9c02e1d3f441b.png
[70 1]: /images/20220527/4cd1d2eb17c044db91d1cb55f6925d84.png