JS realizes the left and right, up and down movement function of list data

This article mainly introduces the JS implementation to add the data of the selected items in the left drop-down list to the right, which supports multi selection movement. Two schemes are provided in this paper: one is to copy the selected items on the left to the right without changing the data on the left, and prevent the data from being added to the right repeatedly; the other is to remove the data from the left while adding the data to the right, remove the data from the right and append it to the left at the same time, and realize the up and down movement function for the list data on the right.

1, Renderings
When moving left and right, select one or more clicks to add or remove (press and hold shift or ctrl to select more than one). Moving up and down does not support multiple selections.

1. Add data on the left side to the right side. When adding data repeatedly, you will be prompted and blocked

2. Move the data on the left to the right, delete it from the list on the left, select the data in the list on the right and click move up / move down to move it

2, Html code:

<!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>Select one or more clicks to add or remove(Hold down shift or ctrl Multiple choice)</p>
    <form method="post" name="myform">
        <p>Data on the left is copied to the right, and data on the right cannot be duplicate</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="Add to" onclick="copyOption(this, 'add')">Add to</button>
                    <br />
                    <br />
                    <button type="button" title="delete" onclick="copyOption(this, 'remove')">delete</button>
                </td>
                <td width="40%">
                    <select id="copyResult" class="sel-box" multiple></select>
                </td>
            </tr>
        </table>
        <p>Move the data on the left to the right and delete it from the list on the left</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="Add to" onclick="moveOption(this.parentNode.previousElementSibling.childNodes[1], this.parentNode.nextElementSibling.childNodes[1])">Add to</button>
                    <br />
                    <br />
                    <button type="button" title="delete" onclick="moveOption(this.parentNode.nextElementSibling.childNodes[1], this.parentNode.previousElementSibling.childNodes[1])">delete</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)">Move upward</button>
                    <br />
                    <br />
                    <button type="button" onclick="changepos(this,1)">Move down</button>
                </td>
            </tr>
        </table>
    </form>
    <script src="../../plugins/jquery-2.0.3.min.js"></script>
</body>
</html> 

3, Js code:

//Dropdown initial data
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" }];
//Right column data set for weight determination
var selectMember = [];

//Initialize page
$(document).ready(function () {
    //Initialization data
    initData(data);
})
/**
 * Initialize the data and bind the drop-down options to the left drop-down box
 */
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);
    });
}
/**
 * The selected item is added to the right, the data in the left column is not deleted, and duplicate data cannot be added to the right
 */
function copyOption(obj, type) {
    var eleA = "";
    var eleB = "";
    if (type == "add") {//Add data from left to right
        eleA = obj.parentNode.previousElementSibling.firstElementChild;
        eleB = obj.parentNode.nextElementSibling.firstElementChild;
    } else {//Delete right data
        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) {//Determine whether the selected item on the left exists in the group member list on the right
                    eleB.options.add(new Option(eSelected.text, eSelected.value));//Add check to right
                    selectMember.push(eSelected.text); //Append the selected value to selectMember []
                } else {
                    alert("This item already exists in the list on the right");
                }
            } else {
                eleA.remove(i);//Remove selected
                i = i - 1;//For each item removed, the index value of the drop-down option is reduced by 1
                selectMember.splice($.inArray(eSelected.text, selectMember), 1); //Remove the selected value from selectMember []
            }
        }
    }
}
/**
 * Move selection left and right
 */
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));//Add check to right
            eleA.remove(i);//Remove selected
            i = i - 1;//For each item removed, the index value of the drop-down option is reduced by 1
        }
    }
}
/**
 * Move selection up and down
 */
function changepos(obj, index) {
    var element = obj.parentNode.previousElementSibling.childNodes[1];
    //Selected item index value
    var selectedIndex = element.options.selectedIndex;
    var selText = element.options[selectedIndex].text;
    var selValue = element.options[selectedIndex].value;
    //Move up to exchange the selected item data with the previous option data
    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;
        }
    }
        //Move down. When moving down, the selected item data will be exchanged with the next option data
    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;
        }
    }
}

Tags: JQuery Java Javascript PHP

Posted on Fri, 03 Apr 2020 23:36:59 -0700 by jesse26