JS实现列表数据左右、上下移动功能 £神魔★判官ぃ 2022-05-27 07:08 400阅读 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
还没有评论,来说两句吧...