Simple drop-down list movement based on html+js

A simple little practice drop-down list movement implemented using html and js. The general function is to select the city name, and then click the button to move accordingly. All left and all right are to select all the city names and move them.

I still use the DOM2 event agent. I have commented the detailed explanation and code steps in the code below, please read it.

[Note: Only for viewing and sharing learning by yourself]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉列表移动</title>
</head>
<style>
    section{
        display: flex;
        align-items:center;
        margin-bottom: 30px;
    }
    select{
        width: 100px;
        height: 200px;
    }
    select:nth-child(1){
        margin-left: 300px;
        margin-right: 30px;
    }
    option{
        font-size: 20px;
    }
    div{
        margin-right: 30px;
    }
    p{
        margin: 0;
        
    }
    input{
        font-size: 20px;
    }
</style>
<body>
    <article>
        <section>
            <select id="leftBox" multiple="multiple">
                
            </select>

            <div>
                <p><input type="button" value="右移"></p>
                <p><input type="button" value="左移"></p>
                <p><input type="button" value="全右"></p>
                <p><input type="button" value="全左"></p>
            </div>

            <select id="rightBox" multiple="multiple">
            </select>
        </section>
    </article>
    <script src="./lie.js"></script>
</body>
</html>

let artEle = document.getElementsByTagName("article")[0];
let secEle = document.querySelector("section");

//获取form里面的所有的input按钮
let inputEle = document.querySelectorAll("div input");

//原始选项数组
let optionArr = [
    { value: "成都" },
    { value: "山西" },
    { value: "九寨沟" },
    { value: "重庆" },
    { value: "河南" },
];

function render() {
    let str = "";
    optionArr.forEach((item) => {
        str += `<option>${item.value}</option>`;
    });
    leftBox.innerHTML = str;
}
render();

//事件代理
secEle.addEventListener("click", function (e) {
    let event = e || window.event;
    switch (event.target.value) {
        case "右移":
            hasNode("#leftBox") ? moveNode("#leftBox", "#rightBox") : "";
            break;
        case "左移":
            hasNode("#rightBox") ? moveNode("#rightBox", "#leftBox") : "";
            break;
        case "全右":
            hasNode("#leftBox",true) ? moveNode("#leftBox", "#rightBox",true) : "";
            break;
        case "全左":
            hasNode("#rightBox",true) ? moveNode("#rightBox", "#leftBox",true) : "";
            break;

        default:
            break;
    }
});

/**
 * faNode获取移动节点的父元素
 * targetNode,把节点移动到的父元素
 * state判断是不是全部移动
 */
function moveNode(faNode, targetNode, state) {
    let nodeA = document.querySelector(faNode);
    let nodeB = document.querySelector(targetNode);
    //判断是不是全部移动
    //为true就是全部移动，就不需要进行筛选
    if (state) {
        [...nodeA.children].forEach(item => nodeB.appendChild(item));
    } else {
        [...nodeA.children].filter(item => item.selected).forEach(item => nodeB.appendChild(item));
        [...nodeB.children]
    }
}

//判断参数是否有子节点
/**
 * node判断的节点
 * state是不是全部移动
 */
function hasNode(node, state) {
    let ele = document.querySelector(node);
    //筛选出该select里面被选中的
    let result = [...ele.children].filter(item => item.selected);
    //如果该select里面的元素节点为空，就表明该select里面没有值，则提示无法移动
    if (ele.children.length == 0) {
        alert("没有可以移动的节点了!!!");
        return false;
    } else if (result.length == 0 && !state) {//如果result这个数组为空的时候，提示无法移动
        alert("您还没有选择需要移动的元素！");
        //返回一个false，则对应的事件代理里面就不执行了;
        return false;
    }
    return true;
}

Simple drop-down list movement based on html+js

Guess you like