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

最新推荐文章于 2024-08-20 10:25:59 发布

jianyuerensheng

最新推荐文章于 2024-08-20 10:25:59 发布

阅读量9.7k

点赞数 3

分类专栏：前端学习文章标签： select 左右移动上下移动前端

本文链接：https://blog.csdn.net/jianyuerensheng/article/details/79930757

版权

本文主要介绍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>
                </