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

本文主要介绍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;//每移除一项，下拉选项的索引值会减1selectMember.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;}}
}

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

vue表格刷新数据_Vue.js的列表数据的同步更新方法
这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...
表格设置翻页 html,使用原生JS实现表格数据的翻页功能
使用原生JS实现如下图所示表格数据的翻页功能: HTML代码: 表格标题 < > 简单处理一下样式,CSS代码: #pagination { text-align: center; } # ...
php编写一个学生类_PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
这个自己的小项目要先告一段落了.可能还有许多bug.请见谅删除学生功能 PHP: // 这里是通过前端代码HTML中的 url 传过来的,用 $_GET 来获取(相关HTML代码可以看一下到主页看一 ...
Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能
一.目标该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个能够进行实现数据分页显示.数据选择.数据详细信息查看功能的数据库网页.该数据库 ...
Django 后台带有字典的列表数据与页面js交互
1.这里只是简单介绍一下Django的view如何跟js进行交互,首先,进入用户明细的时候会进入一个页面,叫用户信息表,里面包含了用户学习的课程和所得到的分数,每门课程对应一个分数,其中课程用下拉框依 ...
json vue 对象转数组_vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
本文实例讲述了vue.js基于v-for实现批量渲染 json数组对象列表数据.分享给大家供大家参考,具体如下: vuejs的出现减轻了对dom的直接操作,同时它提供的 v-for 渲染列表数据也给我 ...
JS国家列表JSON数据及使用
1.新建js存放国家列表数据 var country = [ ["AO", "Angola"], ["AF", "Afghanis ...
js动态生成数据列表
我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...
【效能平台】接口模块——获取列表数据、查看详情数据、增加以及更新项目接口、删除接口相关功能开发（六）
今日状态:充充实实打卡学习星期一星期二星期三星期四星期五星期六星期日成功暂无暂无暂无暂无暂无暂无一.获取接口列表数据二.获取接口详情数据和更新数据三.增加接口数据

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

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

最新文章

热门文章